/*
Theme Name: Will to Win Security
Theme URI: https://demo.instalogic.co.za/
Author: Instalogic
Description: Custom theme for Will to Win Security. Charcoal, red and white, self-hosted type, enhanced photography, built-in quote and contact forms. Business details are edited under Appearance → Customize.
Version: 1.2.1
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: willtowin
*/

/* ==========================================================================
   Design read: redesign (brand preserved) of a local security company site
   for property and procurement managers. Trust-first, soft structural.
   Dials: variance 6, motion 5, density 4.

   One accent (red). One theme: dark opening (hero) and dark close (call to
   action, footer); everything between is light.

   Shape rule, used everywhere:
     interactive controls ........ full pill
     shells (outer frame) ........ --r
     cores (inside a shell) ...... --r minus --bezel
     form inputs ................. --r-input
   Layers: header 60, WhatsApp 70. Nothing else sets z-index globally.

   Motion budget: press 160ms, hover 200-250ms, menu 300ms, scroll entry
   600ms. Moving hover effects only run for a mouse or trackpad, and movement
   is dropped (fades kept) when the visitor asks for reduced motion.
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	--ink: #14181d;
	--ink-2: #1c2128;
	--ink-3: #0f1216;
	--red: #c8102e;
	--red-deep: #a30d25;
	--red-soft: #fbe9ec;
	--paper: #fff;
	--mist: #f4f5f7;
	--text: #3d4450;
	--muted: #626a76;
	--on-dark: #c6cbd3;
	--hair: rgba(20, 24, 29, .09);
	--hair-dark: rgba(255, 255, 255, .13);
	--r: 1.75rem;
	--bezel: .375rem;
	--r-core: calc(var(--r) - var(--bezel));
	--r-input: .875rem;
	--wrap: 1240px;
	--pad: clamp(1.25rem, 4vw, 2rem);
	--section: clamp(5.5rem, 10vw, 9rem);
	--ease: cubic-bezier(.32, .72, 0, 1);
	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--lift: 0 40px 70px -40px rgba(20, 24, 29, .34), 0 14px 28px -20px rgba(20, 24, 29, .2);
	--nav-h: 4.25rem;
}

/* ------------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
figure { margin: 0; }
h1, h2, h3 {
	margin: 0 0 .55em;
	color: var(--ink);
	font-weight: 700;
	font-stretch: 106%;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.1rem + 3vw, 2.95rem); }
h2 { font-size: clamp(1.85rem, 1.15rem + 2.5vw, 3.1rem); letter-spacing: -.03em; }
h3 { font-size: 1.25rem; letter-spacing: -.012em; line-height: 1.2; }
p { margin: 0 0 1.1em; max-width: 65ch; text-wrap: pretty; }
a { color: var(--red); text-underline-offset: .18em; }
a:hover { color: var(--red-deep); }
a[href^="tel:"] { font-variant-numeric: tabular-nums; }
::selection { background: var(--red); color: #fff; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .cta :focus-visible, .site-footer :focus-visible, .topbar :focus-visible, .nav-open .site-nav :focus-visible, .cell--ink:focus-visible, .cell--red:focus-visible { outline-color: #fff; }
.icon { flex: none; }

.screen-reader-text, .form__trap {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 80; padding: .8rem 1.2rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; }
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section__head { max-width: 44rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.section__head h2 { margin-bottom: 0; }
.section__head p { margin: 1.1rem 0 0; color: var(--muted); font-size: clamp(1.125rem, 1rem + .5vw, 1.3rem); line-height: 1.45; }

.eyebrow {
	display: flex; width: fit-content; margin: 0 0 1.25rem;
	padding: .42rem .9rem;
	border-radius: 999px;
	background: var(--red-soft); color: var(--red-deep);
	font-size: .72rem; font-weight: 650; letter-spacing: .17em; line-height: 1.3; text-transform: uppercase;
}
.hero .eyebrow { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px var(--hair-dark); }

/* Double bezel: a tinted shell holding a core with a concentric radius. */
.bezel {
	padding: var(--bezel);
	border-radius: var(--r);
	background: rgba(20, 24, 29, .045);
	box-shadow: inset 0 0 0 1px var(--hair);
}
.bezel > * { border-radius: var(--r-core); }
.bezel > img { width: 100%; outline: 1px solid rgba(20, 24, 29, .08); outline-offset: -1px; }
.bezel--dark { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--hair-dark); }

.icon-disc { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--red-soft); color: var(--red-deep); }

/* ---------------------------------------------------------------- Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-height: 3.25rem; padding: .5rem 1.5rem;
	border: 0; border-radius: 999px;
	font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2; white-space: nowrap;
	text-decoration: none; cursor: pointer;
	transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--arrow { padding-right: .5rem; }
.btn__ico {
	display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-left: .25rem;
	border-radius: 50%; background: rgba(255, 255, 255, .2);
	transition: transform 250ms var(--ease-out);
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2a313b; color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--mist); color: var(--ink); }
.btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); }
.btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px #fff; }
.btn[disabled] { opacity: .65; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { transition: transform 200ms var(--ease-out); }

/* ----------------------------------------------------------------- Header */
.topbar { background: var(--ink-3); color: var(--on-dark); font-size: .8125rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.5rem; }
.topbar__list { display: flex; gap: 1.5rem; list-style: none; }
.topbar__list li, .topbar__list a { display: inline-flex; align-items: center; gap: .45rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar__motto { display: flex; gap: 1rem; margin: 0; color: #fff; font-weight: 600; letter-spacing: .02em; }
.topbar__psira { color: var(--on-dark); font-weight: 500; }

/* Floating pill. The header itself has no height, so the hero runs under it. */
.site-header { position: sticky; top: 0; z-index: 60; height: 0; }
.site-header > .wrap { padding-top: .75rem; }
.admin-bar .site-header { top: 32px; }
.site-header__pill {
	position: relative; isolation: isolate;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	height: var(--nav-h); padding: 0 .5rem 0 .85rem;
	border-radius: 999px;
}
.site-header__pill::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: inherit;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
	box-shadow: inset 0 0 0 1px var(--hair), var(--lift);
	transition: opacity 200ms ease;
}
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; transition: color 200ms ease; }
.brand:hover { color: var(--ink); }
.brand__logo { width: auto; height: 2.75rem; }
.brand__name { font-size: 1.125rem; font-weight: 720; font-stretch: 106%; letter-spacing: -.015em; line-height: 1.1; white-space: nowrap; }
.brand__name span { font-weight: 480; color: var(--muted); transition: color 200ms ease; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav .menu { display: flex; gap: 1.6rem; list-style: none; }
.site-nav .menu a { display: block; padding: .65rem 0; color: var(--ink); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 200ms ease; }
.site-nav .menu a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--red); }
.site-nav .btn { min-height: 3.25rem; }
.nav-toggle { position: relative; z-index: 2; display: none; width: 3.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
.nav-toggle__bars { position: absolute; inset: 0; }
.nav-toggle__bars i { position: absolute; left: 1rem; right: 1rem; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: #fff; transition: transform 250ms var(--ease-out); }
.nav-toggle__bars i:first-child { transform: translateY(-4px); }
.nav-toggle__bars i:last-child { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child { transform: rotate(-45deg); }

/* ------------------------------------------------------------------- Hero */
.hero {
	background: radial-gradient(54rem 28rem at 94% -14%, rgba(200, 16, 46, .22), transparent 62%), var(--ink);
	color: var(--on-dark);
}
.hero__in {
	display: grid; gap: clamp(2rem, 5vw, 3.75rem); align-items: center;
	padding-top: calc(var(--nav-h) + .75rem + clamp(2.5rem, 5vw, 3.75rem));
	padding-bottom: clamp(3rem, 6vw, 4.75rem);
}
.hero--home .hero__in { padding-bottom: clamp(7rem, 12vw, 9.5rem); }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero__lead { max-width: 33rem; margin: 0; font-size: 1.1875rem; }
.hero--plain .hero__text { max-width: 48rem; }
.hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.hero--page .hero__media img { aspect-ratio: 16 / 10; }

@media (prefers-reduced-motion: no-preference) {
	@keyframes wtw-rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
	.hero__text > * { animation: wtw-rise 700ms var(--ease-out) both; }
	.hero__text > :nth-child(2) { animation-delay: .07s; }
	.hero__text > :nth-child(3) { animation-delay: .14s; }
	.hero__text > :nth-child(4) { animation-delay: .21s; }
	.hero__media { animation: wtw-rise 800ms var(--ease-out) .1s both; }
}

/* ------------------------------------------------------ Quote quick start */
.brief-wrap { position: relative; margin-top: clamp(-5.5rem, -7vw, -3.75rem); }
.brief-shell { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--hair), var(--lift); }
.brief { display: grid; gap: 1.1rem 1.25rem; align-items: end; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); background: var(--paper); }
.brief h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.brief__intro p { margin: 0; color: var(--muted); font-size: .9375rem; }
.brief__field label, .field label { display: block; margin-bottom: .4rem; color: var(--ink); font-size: .9rem; font-weight: 650; }

select, input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], textarea {
	width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
	border: 1px solid #bfc5ce; border-radius: var(--r-input);
	background: var(--paper); color: var(--ink);
	font: inherit; font-size: 1rem;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
select {
	appearance: none; padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2314181d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center;
}
textarea { min-height: 8.5rem; resize: vertical; }
::placeholder { color: #6f7783; opacity: 1; }
select:focus, input:focus, textarea:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 4px rgba(200, 16, 46, .16); }

/* ------------------------------------------------------- Services (bento) */
.bento { display: grid; gap: 1rem; }
.cell { display: block; color: var(--text); text-decoration: none; transition: transform 250ms var(--ease-out), box-shadow 250ms ease; }
.cell:hover { color: var(--text); }
.cell__in { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--paper); }
.cell__img { display: block; overflow: hidden; }
.cell__img img { width: 100%; height: clamp(13rem, 24vw, 20rem); object-fit: cover; transition: transform 400ms var(--ease-out); }
.cell--armed-response .cell__img img { object-position: 5% 50%; }
.cell__body { position: relative; display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.6rem 1.75rem 1.7rem; }
.cell__body .icon-disc { margin-bottom: .9rem; }
.cell__title { padding-right: 3rem; color: var(--ink); font-size: 1.3rem; font-weight: 700; font-stretch: 106%; letter-spacing: -.015em; line-height: 1.18; }
.cell--photo .cell__title { font-size: 1.6rem; }
.cell__text { max-width: 34rem; font-size: .9688rem; line-height: 1.55; }
.cell__go {
	position: absolute; right: 1.25rem; top: 1.35rem;
	display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: var(--mist); color: var(--ink);
	transition: transform 250ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.cell:hover .cell__go { background: var(--red); color: #fff; }
.cell--mist .cell__in { background: #e9ebef; }
.cell--mist .cell__go { background: var(--paper); }
.cell--ink .cell__in { background: var(--ink); color: var(--on-dark); }
.cell--ink .cell__title, .cell--red .cell__title { color: #fff; }
.cell--ink .icon-disc, .cell--ink .cell__go { background: rgba(255, 255, 255, .1); color: #fff; }
.cell--red .cell__in { background: var(--red); color: #fff; }
.cell--red .icon-disc, .cell--red .cell__go { background: rgba(255, 255, 255, .18); color: #fff; }
.cell--red:hover .cell__go { background: #fff; color: var(--red); }

/* ------------------------------------------------------------------ Split */
.split { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__text > .btn { margin-top: 1.25rem; }
.split__text h2, .sectors__text h2 { font-size: clamp(1.8rem, 1.15rem + 2vw, 2.6rem); }
.value-list { margin: 1.75rem 0 .75rem; list-style: none; }
.value-list li { display: grid; gap: .15rem 1.5rem; padding: 1rem 0; font-size: .9688rem; }
.value-list li + li { border-top: 1px solid var(--hair); }
.value-list strong { color: var(--ink); font-size: 1.0625rem; }
.badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; background: var(--mist); color: var(--ink); font-weight: 650; font-size: .9375rem; }
.badge .icon { color: var(--red); }

/* ------------------------------------------------------------------ Steps */
.steps { display: grid; gap: 1rem; list-style: none; }
.step { transition: transform 250ms var(--ease-out), box-shadow 250ms ease; }
.step__in { position: relative; isolation: isolate; overflow: hidden; height: 100%; padding: 1.9rem 1.9rem 2.2rem; background: var(--paper); }
.step__in::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.step__num { display: block; margin-bottom: clamp(2rem, 5vw, 3.5rem); color: var(--red); font-size: 1rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: .5rem; font-size: 1.45rem; }
.step p { margin: 0; }

/* Cursor light: a soft disc that follows the pointer inside a card. */
.glow {
	position: absolute; z-index: -1; left: 0; top: 0;
	width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(200, 16, 46, .085), rgba(200, 16, 46, 0));
	opacity: 0; pointer-events: none;
	transition: opacity 250ms ease;
}
.is-hot .glow { opacity: 1; }
.cell--ink .glow, .cell--red .glow, .ind--ink .glow { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); }

/* ---------------------------------------------------- Industries (pills) */
.sectors { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sectors__text > p:not(.eyebrow) { color: var(--muted); font-size: 1.125rem; margin: 0; }
.pill-cloud { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; }
.sector-pill {
	display: inline-flex; align-items: center; gap: .85rem;
	padding: .45rem 1.5rem .45rem .45rem;
	border-radius: 999px; background: var(--paper); color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--hair);
	font-size: 1.125rem; font-weight: 650; text-decoration: none; white-space: nowrap;
	transition: transform 250ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}
.sector-pill .icon-disc { transition: background-color 200ms ease, color 200ms ease; }
.sector-pill:hover { background: var(--ink); color: #fff; box-shadow: var(--lift); }
.sector-pill:hover .icon-disc { background: var(--red); color: #fff; }

/* -------------------------------------------------------------------- CTA */
.section--cta { background: var(--mist); padding-top: 0; }
.section:not(.section--mist) + .section--cta { background: var(--paper); }
.cta { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-dark), var(--lift); }
.cta__in {
	display: grid; gap: 2rem; align-items: center;
	padding: clamp(2.25rem, 6vw, 4.75rem);
	background: radial-gradient(42rem 24rem at 100% 0, rgba(200, 16, 46, .3), transparent 62%), var(--ink);
	color: var(--on-dark);
}
.cta h2 { color: #fff; margin-bottom: .4em; }
.cta p { margin: 0; max-width: 34rem; font-size: 1.125rem; }
.cta__shield { display: none; width: 10rem; height: auto; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .5)); }

/* ------------------------------------------------- Company: values ledger */
.ledger { display: grid; gap: 2rem clamp(2rem, 6vw, 5rem); }
.ledger h2 { margin: 0; }
.ledger__rows { list-style: none; }
.ledger__rows li { display: grid; gap: .3rem 2rem; padding: 1.75rem 0; }
.ledger__rows li:first-child { padding-top: 0; }
.ledger__rows li + li { border-top: 1px solid var(--hair); }
.ledger__rows h3 { margin: 0; font-size: 1.5rem; }
.ledger__rows p { margin: 0; }

/* ---------------------------------------------------------- Services page */
.section--services { padding-top: clamp(3rem, 6vw, 5rem); }
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 3.5rem); align-items: start; }
.svc-nav { min-width: 0; }
.svc-nav ul { display: flex; gap: .5rem; list-style: none; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.svc-nav ul::-webkit-scrollbar { display: none; }
.svc-nav a {
	display: block; padding: .6rem 1.1rem; border-radius: 999px;
	color: var(--ink); background: var(--mist);
	font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease;
}
.svc-nav a:hover { background: #e6e9ed; color: var(--ink); }
.svc-nav a[aria-current="true"] { background: var(--ink); color: #fff; }
.svc-list { display: grid; gap: 1.25rem; min-width: 0; }
.svc { scroll-margin-top: 6.5rem; transition: box-shadow 250ms ease; }
.svc__in { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.svc__body { padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.svc__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.svc__head h2 { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem); }
.svc__lead { font-size: 1.0938rem; }
.svc__sub { margin: 1.6rem 0 1rem; color: var(--muted); font-size: .9375rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; }
.ticks { display: grid; gap: .8rem 2rem; margin-bottom: 1.9rem; list-style: none; }
.ticks li { display: flex; gap: .7rem; color: var(--ink); }
.ticks .icon { margin-top: .25rem; color: var(--red); }

/* -------------------------------------------------------- Industries page */
.ind-grid { display: grid; gap: 1rem; }
.ind { scroll-margin-top: 7rem; transition: transform 250ms var(--ease-out), box-shadow 250ms ease; }
.ind:target { box-shadow: inset 0 0 0 2px var(--red); }
.ind__in { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 1.75rem; background: var(--paper); }
.ind h3 { margin: 1.1rem 0 .5rem; font-size: 1.35rem; }
.ind p { margin: 0; }
.ind .text-link { margin-top: auto; padding-top: 1.25rem; font-size: .9375rem; }
.ind--ink .ind__in { background: var(--ink); color: var(--on-dark); }
.ind--ink h3 { color: #fff; }
.ind--ink .icon-disc { background: rgba(255, 255, 255, .1); color: #fff; }
.ind--ink .text-link { color: #fff; }
.ind--red .ind__in { background: var(--red-soft); }

/* ------------------------------------------------------ Contact and forms */
.contact { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.wtw-contact .section, .wtw-quote .section { background: var(--mist); }
.panel { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--hair), var(--lift); }
.panel__in { padding: clamp(1.5rem, 3.5vw, 2.75rem); background: var(--paper); }
.panel__in > h2, .contact__details > h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.panel__in > p { color: var(--muted); }
.contact-list { margin: 1.75rem 0; }
.contact-list > div { padding: 1.2rem 0; }
.contact-list > div + div { border-top: 1px solid var(--hair); }
.contact-list dt { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; color: var(--muted); font-size: .875rem; font-weight: 650; }
.contact-list dt .icon { color: var(--red); }
.contact-list dd { margin: 0 0 0 1.85rem; color: var(--ink); font-size: 1.125rem; font-weight: 600; }
.contact-list dd a:not(.text-link) { color: var(--ink); text-decoration: none; }
.contact-list dd a:not(.text-link):hover { color: var(--red); }
.contact-list dd .text-link { margin-top: .4rem; font-size: .9375rem; }
.contact--quote .contact__details { display: grid; gap: 1.25rem; }
.aside-card { padding: 1.9rem; border-radius: var(--r); background: var(--ink); color: var(--on-dark); }
.aside-card h2 { margin-bottom: 1rem; color: #fff; font-size: 1.3rem; }
.aside-list { display: grid; gap: .7rem; list-style: none; }
.aside-list a { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.aside-list a:hover { text-decoration: underline; }
.aside-card--plain { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); color: var(--text); }
.aside-card--plain h2 { color: var(--ink); }
.mini-steps { display: grid; gap: 1rem; padding-left: 1.3rem; font-size: .9375rem; }
.mini-steps li::marker { color: var(--red); font-weight: 700; }
.mini-steps strong { display: block; color: var(--ink); }
.aside-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.form { margin-top: 1.75rem; scroll-margin-top: 7rem; }
.form__grid { display: grid; gap: 1.2rem 1.25rem; }
.field__req { color: var(--red); }
.field__opt { margin-left: .35rem; color: var(--muted); font-size: .8125rem; font-weight: 500; }
.field__hint { margin: .45rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.form__privacy { flex: 1 1 14rem; margin: 0; color: var(--muted); font-size: .875rem; }
.form__notice { margin-bottom: 1.5rem; padding: 1.1rem 1.3rem; border-radius: var(--r-input); box-shadow: inset 0 0 0 1px currentColor; }
.form__notice strong { display: block; }
.form__notice--ok { background: #eaf7ef; color: #14532d; }
.form__notice--err { background: var(--red-soft); color: #7d0a1d; }
.form__notice a { color: inherit; }

/* ----------------------------------------------------------------- Footer */
.site-footer { background: var(--ink-3); color: #aab0ba; font-size: .9688rem; }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: clamp(3.5rem, 7vw, 5.5rem) 0; }
.site-footer__logo { display: inline-block; margin-bottom: 1.25rem; padding: .7rem .9rem; border-radius: 1.25rem; background: #fff; }
.site-footer__logo img { width: auto; height: 5.25rem; }
.site-footer__brand p { max-width: 22rem; }
.site-footer__motto { color: #fff; font-weight: 650; }
.site-footer__h { margin: 0 0 1rem; color: #fff; font-size: 1rem; font-stretch: 100%; letter-spacing: 0; }
.site-footer ul { display: grid; gap: .25rem; list-style: none; }
.site-footer li a { display: inline-flex; padding-block: .3rem; }
.site-footer a { color: #c6cbd3; text-decoration: none; transition: color 200ms ease; }
.site-footer a:hover { color: #fff; }
.site-footer__contact a { display: inline-flex; align-items: flex-start; gap: .6rem; overflow-wrap: anywhere; }
.site-footer__contact .icon { margin-top: .28rem; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 1.5rem; border-top: 1px solid var(--hair-dark); font-size: .875rem; }
.site-footer__base p { margin: 0; }
.wa-float {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.25rem; border-radius: 999px;
	background: var(--red); color: #fff; font-weight: 650; text-decoration: none;
	box-shadow: 0 18px 34px -14px rgba(200, 16, 46, .7);
	transition: transform 250ms var(--ease-out), background-color 200ms ease;
}
.wa-float:hover { background: var(--red-deep); color: #fff; }

/* -------------------------------------------------- Editor content (prose) */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 1.6em; font-size: 1.75rem; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { margin: 0 0 1.1em 1.25rem; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--r-input); }

/* ----------------------------------------------------------- Scroll entry */
.js [data-r] { opacity: 0; }
.js [data-r].is-in { opacity: 1; transition: opacity 600ms var(--ease-out) var(--d, 0ms); }
@media (prefers-reduced-motion: no-preference) {
	.js [data-r] { transform: translateY(1.25rem); }
	.js [data-r].is-in { transform: none; transition: opacity 600ms var(--ease-out) var(--d, 0ms), transform 600ms var(--ease-out) var(--d, 0ms); }
}

/* ---------------------------------------- Hover (mouse and trackpad only) */
@media (hover: hover) and (pointer: fine) {
	.cell:hover, .step:hover, .ind:hover { box-shadow: inset 0 0 0 1px rgba(20, 24, 29, .14), var(--lift); }
	.svc:hover { box-shadow: inset 0 0 0 1px rgba(20, 24, 29, .16); }
	.step:hover .step__in::after { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.btn:hover .btn__ico { transform: translate(3px, -1px) scale(1.06); }
	.text-link:hover .icon { transform: translate(2px, -2px); }
	.cell:hover, .step:hover, .ind:hover { transform: translateY(-6px); }
	.cell:hover .cell__img img { transform: scale(1.035); }
	.cell:hover .cell__go { transform: translate(3px, -3px); }
	.sector-pill:hover { transform: translateY(-3px); }
	.wa-float:hover { transform: translateY(-2px); }
}

/* ------------------------------------------------------------ Breakpoints */
@media (min-width: 640px) {
	.form__grid { grid-template-columns: 1fr 1fr; }
	.field--wide { grid-column: 1 / -1; }
	.value-list li { grid-template-columns: 9rem 1fr; }
	.ticks { grid-template-columns: 1fr 1fr; }
	.ind-grid { grid-template-columns: repeat(2, 1fr); }
	.ind-grid > :last-child { grid-column: span 2; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.ledger__rows li { grid-template-columns: 12rem 1fr; align-items: baseline; }
}
@media (min-width: 800px) {
	.bento { grid-template-columns: repeat(12, 1fr); }
	.cell--guarding { grid-column: span 7; }
	.cell--armed-response { grid-column: span 5; }
	.cell--cctv-access-control, .cell--event-security, .cell--vip-protection { grid-column: span 4; }
	.cell--cash-in-transit { grid-column: span 7; }
	.cell--trading-supply { grid-column: span 5; }
	.steps { grid-template-columns: repeat(3, 1fr); align-items: start; }
	.step:nth-child(2) { margin-top: 2.5rem; }
	.step:nth-child(3) { margin-top: 5rem; }
	.cta__in { grid-template-columns: 1fr auto; }
	.cta__shield { display: block; }
	.brief { grid-template-columns: 1fr 1fr; }
	.brief__intro { grid-column: 1 / -1; }
	.brief .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 1000px) {
	.hero__in { grid-template-columns: 1.1fr .9fr; }
	.hero--plain .hero__in { grid-template-columns: 1fr; }
	.split { grid-template-columns: 1fr 1fr; }
	.sectors { grid-template-columns: .9fr 1.1fr; }
	.ledger { grid-template-columns: .8fr 1.2fr; }
	.contact { grid-template-columns: .8fr 1.2fr; }
	.contact--quote { grid-template-columns: 1.3fr .7fr; }
	.ind-grid { grid-template-columns: repeat(3, 1fr); }
	.ind-grid > :first-child { grid-column: span 2; }
	.site-footer__grid { grid-template-columns: 1.5fr .9fr 1.1fr 1.3fr; }
	.brief { grid-template-columns: 1.05fr 1fr 1fr auto; }
	.brief__intro, .brief .btn { grid-column: auto; }
	.svc-layout { grid-template-columns: 14.5rem minmax(0, 1fr); }
	.svc-nav { position: sticky; top: 6.5rem; }
	.svc-nav ul { flex-direction: column; gap: .35rem; margin: 0; padding: 0; overflow: visible; }
	.svc-nav a { background: transparent; white-space: normal; }
}
@media (max-width: 1039px) {
	.nav-toggle { display: block; }
	.site-nav {
		position: fixed; inset: 0; z-index: 1;
		flex-direction: column; align-items: flex-start; justify-content: center; gap: 2.5rem;
		padding: 7rem clamp(1.75rem, 8vw, 4rem) 3rem;
		background: rgba(15, 18, 22, .94);
		-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
		opacity: 0; visibility: hidden;
		transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
	}
	.nav-open .site-nav { opacity: 1; visibility: visible; transition-delay: 0s; }
	.site-nav .menu { flex-direction: column; gap: .35rem; }
	.site-nav .menu a { padding: .45rem 0; color: #fff; font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 700; font-stretch: 106%; letter-spacing: -.02em; }
	.site-nav .menu a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: #ff9aa9; }
	.site-nav .menu li, .site-nav > .btn { opacity: 0; transform: translateY(1.25rem); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
	.nav-open .site-nav .menu li, .nav-open .site-nav > .btn { opacity: 1; transform: none; }
	.nav-open .site-nav .menu li:nth-child(1) { transition-delay: .04s; }
	.nav-open .site-nav .menu li:nth-child(2) { transition-delay: .08s; }
	.nav-open .site-nav .menu li:nth-child(3) { transition-delay: .12s; }
	.nav-open .site-nav .menu li:nth-child(4) { transition-delay: .16s; }
	.nav-open .site-nav .menu li:nth-child(5) { transition-delay: .2s; }
	.nav-open .site-nav .menu li:nth-child(n+6) { transition-delay: .24s; }
	.nav-open .site-nav > .btn { transition-delay: .28s; }
	.nav-open .site-header__pill::before { opacity: 0; }
	.nav-open .brand, .nav-open .brand__name span { color: #fff; }
	.nav-open .nav-toggle { background: rgba(255, 255, 255, .14); }
	html.nav-open { overflow: hidden; }
	.topbar__addr { display: none !important; }
}
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
	.topbar__motto { display: none; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
	.topbar__mail { display: none !important; }
	.brand__name { font-size: 1rem; }
	.btn-row .btn { flex: 1 1 100%; }
	.sector-pill { font-size: 1rem; }
	.section { padding-block: clamp(4rem, 16vw, 5.5rem); }
	.section--cta { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn:active { transform: none; }
	.site-nav .menu li, .site-nav > .btn { transform: none; }
	.nav-toggle__bars i { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.site-header__pill::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.site-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}