/* ===================================================================
   KBG Security Solutions — Design System
   v2.0 — Premium refresh (copy-safe, class-compatible)
   =================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&display=swap");

/* -------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand: #a8201a;
  --brand-600: #8e1b15;
  --brand-700: #721612;
  --brand-glow: rgba(168, 32, 26, .22);
  --brand-dark: #8e1b15;

  /* Neutrals (light) */
  --ink: #0e1116;
  --ink-2: #1a1f2b;
  --ink-3: #2a3040;
  --muted: #535a6b;
  --muted-2: #7a8294;
  --line: #e4e7ee;
  --line-2: #eef1f6;
  --soft: #f3f5f9;
  --paper: #f7f8fb;
  --white: #ffffff;
  --accent: #9a9da6;
  --navy: #0f1420;
  --band-dark: #0e1116;
  --footer-surface: #0b0d12;
  --on-brand: #ffffff;

  /* Elevation (light) */
  --shadow-1: 0 1px 2px rgba(14, 17, 22, .04), 0 1px 1px rgba(14, 17, 22, .03);
  --shadow-2: 0 6px 16px -4px rgba(14, 17, 22, .06), 0 2px 6px -2px rgba(14, 17, 22, .04);
  --shadow-3: 0 18px 40px -12px rgba(14, 17, 22, .18), 0 8px 16px -8px rgba(14, 17, 22, .08);
  --shadow-4: 0 36px 64px -18px rgba(14, 17, 22, .28), 0 16px 32px -12px rgba(14, 17, 22, .12);
  --shadow-soft: var(--shadow-2);
  --shadow: var(--shadow-3);

  /* Geometry */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --max: 1220px;
  --max-narrow: 980px;
  --hairline: 1px solid var(--line);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 560ms;

  /* Type */
  --font-sans: "Inter Tight", "Inter", "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;

  font-family: var(--font-sans);
  color-scheme: light;
}

/* -------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Prevent white flash between top-bar and header on page load.
   The header sits directly below the top-bar with no margin/gap. */
.top-bar + .site-header {
  margin-top: 0;
  border-top: none;
}

/* Prevent any sub-pixel white gap between the hero and the section
   that follows it */
.hero + .section,
.hero + section {
  margin-top: -1px;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--brand-glow);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--brand);
  color: #fff;
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 9999;
  padding: 12px 16px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: top var(--t-base) var(--ease);
}

.skip-link:focus {
  top: 12px;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------
   3. Top bar + Header
   ------------------------------------------------------------------- */
.top-bar {
  position: relative;
  z-index: 91;
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
  font-size: 12.5px;
  letter-spacing: .01em;
  border-bottom: none;
}

.top-bar-inner {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.top-bar p {
  margin: 0;
  font-weight: 600;
}

.top-bar a {
  color: #fff;
  font-weight: 600;
}

.top-bar a:hover {
  color: #fff;
}

.top-bar div div {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.top-bar span[aria-hidden] {
  opacity: .4;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    backdrop-filter var(--t-base) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: rgba(14, 17, 22, .08);
  box-shadow: 0 8px 30px -10px rgba(14, 17, 22, .1);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
}

/* Header text becomes white when floating over the hero */
.site-header:not(.is-scrolled) .primary-nav > a,
.site-header:not(.is-scrolled) .nav-services > summary,
.site-header:not(.is-scrolled) .header-phone {
  color: rgba(255, 255, 255, .92);
}

.site-header:not(.is-scrolled) .primary-nav > a:hover,
.site-header:not(.is-scrolled) .nav-services > summary:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.site-header:not(.is-scrolled) .primary-nav > a.active {
  color: #fff;
}

.site-header:not(.is-scrolled) .primary-nav > a.active::after {
  background: #fff;
}

.site-header:not(.is-scrolled) .brand img {
  filter: brightness(0) invert(1);
}

.site-header:not(.is-scrolled) .nav-toggle {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

.site-header:not(.is-scrolled) .nav-toggle span:not(.sr-only) {
  background: #fff;
}

.site-header:not(.is-scrolled) .theme-toggle {
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .88);
}

.site-header:not(.is-scrolled) .theme-toggle:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.nav-shell {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 22px;
  transition: min-height var(--t-base) var(--ease);
}

.site-header.is-scrolled .nav-shell {
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  transition: transform var(--t-base) var(--ease);
}

.brand:hover {
  transform: translateY(-1px);
}

.brand img {
  width: auto;
  max-width: 220px;
  max-height: 72px;
  object-fit: contain;
  transition: max-height var(--t-base) var(--ease);
}

.site-header.is-scrolled .brand img {
  max-height: 58px;
}

.header-phone {
  display: none;
  margin-left: auto;
  color: var(--ink);
  font-weight: 800;
}

.primary-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.primary-nav > a,
.nav-services > summary {
  position: relative;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav-services > summary::-webkit-details-marker,
.nav-services > summary::marker {
  display: none;
  content: "";
}

.nav-services > summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
  opacity: .7;
}

.nav-services[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.primary-nav > a:hover,
.nav-services > summary:hover {
  background: var(--soft);
  color: var(--ink);
  text-decoration: none;
}

.primary-nav > a.active {
  color: var(--ink);
}

.primary-nav > a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

.nav-cta {
  margin-left: 8px;
  background: var(--brand);
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 6px 18px -6px var(--brand-glow);
  transition:
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.nav-cta:hover,
.nav-cta.active {
  background: var(--brand-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px var(--brand-glow);
  text-decoration: none;
}

.nav-cta.active::after {
  display: none;
}

.nav-services {
  position: relative;
}

.service-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  display: grid;
  gap: 2px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-4);
  animation: menuFadeIn var(--t-base) var(--ease);
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.service-menu a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.service-menu a:hover {
  background: var(--soft);
  color: var(--brand);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.nav-toggle:hover {
  background: var(--soft);
}

.nav-toggle span:not(.sr-only) {
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.theme-toggle:hover {
  background: var(--soft);
  color: var(--brand);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------
   4. Hero
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}

.home-hero {
  /* Final value set in section 35 — viewport-fit with fallback */
  min-height: 720px;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
  will-change: transform;
  transition: transform 1.2s var(--ease-out);
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(14, 17, 22, .92) 0%,
      rgba(14, 17, 22, .78) 38%,
      rgba(14, 17, 22, .45) 72%,
      rgba(14, 17, 22, .32) 100%),
    radial-gradient(ellipse at 20% 10%, rgba(168, 32, 26, .22) 0%, transparent 55%),
    rgba(14, 17, 22, .2);
  pointer-events: none;
}

.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .4) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 86px 32px 90px;
}

.home-hero .hero-content {
  padding-bottom: 110px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--brand);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

.hero .eyebrow {
  color: rgba(255, 255, 255, .78);
}

.hero h1 {
  max-width: 960px;
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
}

/* Home hero gets the biggest scale; inner pages are capped smaller */
.home-hero h1 {
  font-size: clamp(40px, 6.2vw, 80px);
  max-width: 900px;
}

/* Inner-page heroes: consistent, moderate scale across all pages */
.hero.page-hero:not(.home-hero) h1 {
  font-size: clamp(32px, 4vw, 52px);
  max-width: 860px;
  line-height: 1.05;
}

.hero-subtitle {
  max-width: 720px;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.hero-actions,
.home-cta-row,
.cookie-actions,
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Live operations pill — injected by JS on home hero only */
.ops-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 14px 8px 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .92);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.ops-pill .dot {
  position: relative;
  width: 8px;
  height: 8px;
  background: #3ddc8d;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(61, 220, 141, .25);
}

.ops-pill .dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #3ddc8d;
  opacity: .35;
  animation: pulse 2s var(--ease) infinite;
}

@keyframes pulse {
  0% { transform: scale(.8); opacity: .5; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(.8); opacity: 0; }
}

/* Subtle scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent);
  animation: cue 2s var(--ease) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%, 100% { transform: scaleY(.4); opacity: .3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* -------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px -10px var(--brand-glow);
}

.btn-primary:hover {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 14px 30px -10px var(--brand-glow);
}

.btn-light {
  background: rgba(255, 255, 255, .94);
  color: #0e1116;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-light:hover {
  background: #fff;
  color: #0e1116;
}

/* Dark mode: hero overlay is still dark, so keep .btn-light readable */
[data-theme="dark"] .btn-light {
  background: rgba(255, 255, 255, .94);
  color: #0e1116;
}

[data-theme="dark"] .btn-light:hover {
  background: #fff;
  color: #0e1116;
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}

.btn-secondary:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.btn-full {
  width: 100%;
}

/* Arrow on primary/light buttons when JS injects */
.btn .btn-arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------
   6. Trust strip + Partner rail
   ------------------------------------------------------------------- */
.trust-strip {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 22px 0;
}

.trust-grid span {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.trust-grid span:hover {
  background: #fff;
  border-color: var(--ink-3);
  transform: translateY(-2px);
}

.trust-grid span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--brand);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 3 6v6c0 5 3.8 9.4 9 10 5.2-.6 9-5 9-10V6l-9-4Zm-1 14.5-4-4 1.4-1.4L11 13.7l4.6-4.6 1.4 1.4-6 6Z' fill='currentColor'/></svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 3 6v6c0 5 3.8 9.4 9 10 5.2-.6 9-5 9-10V6l-9-4Zm-1 14.5-4-4 1.4-1.4L11 13.7l4.6-4.6 1.4 1.4-6 6Z' fill='currentColor'/></svg>") center / contain no-repeat;
  flex-shrink: 0;
}

.partner-strip {
  overflow: hidden;
  padding: 32px 0;
  background: linear-gradient(180deg, #fff, var(--paper));
  border-bottom: 1px solid var(--line);
}

.partner-rail {
  position: relative;
  overflow: hidden;
  padding: 0 40px;
}

.partner-rail::before,
.partner-rail::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: 110px;
  height: 100%;
  pointer-events: none;
}

.partner-rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(247, 248, 251, 0) 100%);
}

.partner-rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper) 0%, rgba(247, 248, 251, 0) 100%);
}

.partner-rail ul {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: partner-scroll 52s linear infinite;
}

.partner-rail:hover ul {
  animation-play-state: paused;
}

.partner-rail li {
  flex: 0 0 auto;
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.partner-rail li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.partner-rail img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.94) contrast(1.05);
}

@keyframes partner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------
   7. Sections + Typography
   ------------------------------------------------------------------- */
.section {
  padding: 104px 0;
  background: var(--paper);
}

.section:nth-of-type(even) {
  background: #fff;
}

.section-alt {
  background: var(--soft) !important;
}

.section-compact {
  padding: 80px 0;
}

.section-heading {
  max-width: 880px;
  margin: 0 auto 56px 0;
  text-align: left;
}

.section-heading.container {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.section-heading h2,
.section h2,
.cta-band h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: var(--tracking-tighter);
}

.section p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.section-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}

/* -------------------------------------------------------------------
   8. Layout blocks — split / intro / grids
   ------------------------------------------------------------------- */
.split,
.home-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .78fr);
  gap: 56px;
  align-items: center;
}

.contact-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

.contact-layout > div {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.contact-layout > div > h2 {
  margin-bottom: 10px;
}

.contact-layout > div > p {
  margin: 0 0 16px;
}

.contact-layout-surface {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.align-start {
  align-items: start;
}

.home-intro-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
}

.home-intro-grid h2 {
  max-width: 840px;
}

.home-cta-row {
  margin-top: 26px;
}

/* Intro image on home + about */
.intro-image {
  position: relative;
  min-height: 460px;
  align-self: stretch;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(14, 17, 22, .02), rgba(14, 17, 22, .22)),
    url("images/team-ops.jpg") center 20% / cover no-repeat;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.intro-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
}

/* -------------------------------------------------------------------
   9. Info / service / decision cards
   ------------------------------------------------------------------- */
.card-grid,
.service-grid,
.service-highlights,
.sector-grid,
.process-grid {
  display: grid;
  gap: 20px;
}

.card-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.service-highlights {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 28px;
}

.service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sector-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.process-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-card,
.decision-card,
.service-highlights article,
.sector-grid article,
.process-grid article,
.quality-card,
.contact-panel,
.compliance-note,
.quote-checklist {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.info-card:hover,
.decision-card:hover,
.service-highlights article:hover,
.sector-grid article:hover,
.process-grid article:hover {
  border-color: rgba(14, 17, 22, .14);
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
}

.info-card h2,
.info-card h3,
.decision-card h3,
.service-highlights h3,
.sector-grid h3,
.process-grid h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.info-card p,
.decision-card p,
.service-highlights p,
.sector-grid p,
.process-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.service-highlights article {
  border-left: 3px solid var(--brand);
}

.wide-card {
  grid-column: span 3;
}

.decision-card span,
.process-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px -6px var(--brand-glow);
}

/* Service cards */
.service-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-3);
  border-color: rgba(14, 17, 22, .14);
}

.service-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 32%;
  background: var(--soft);
  transition: transform var(--t-slow) var(--ease);
}

.service-card:nth-child(1) img,
.service-card:nth-child(2) img {
  object-position: center 8%;
}

.service-card:hover img {
  transform: scale(1.04);
}

.service-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 17, 22, .45) 100%);
  pointer-events: none;
  opacity: .85;
  transition: opacity var(--t-base) var(--ease);
}

.service-card:hover::after {
  opacity: 1;
}

.service-card div {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px;
  z-index: 1;
}

/* Optional icon badge injected by JS into top-left of image */
.service-card-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .95);
  color: var(--brand);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px -4px rgba(14, 17, 22, .25);
}

.service-card-icon svg {
  width: 20px;
  height: 20px;
}

.service-card h2,
.service-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.service-card p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.text-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.text-link::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}

.text-link:hover {
  color: var(--brand-600);
  text-decoration: none;
  gap: 10px;
}

/* -------------------------------------------------------------------
   10. Check lists
   ------------------------------------------------------------------- */
.check-list {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 18px;
  height: 18px;
  background: var(--brand);
  border-radius: 50%;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='white'/><path d='m8 12 3 3 5-6' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='white'/><path d='m8 12 3 3 5-6' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center / contain no-repeat;
}

/* -------------------------------------------------------------------
   11. CTA band / footer
   ------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: 100px 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(168, 32, 26, .28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(168, 32, 26, .14) 0%, transparent 55%),
    var(--band-dark);
  color: #fff;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, transparent 70%);
  pointer-events: none;
}

.cta-band > .container {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  max-width: 760px;
  color: rgba(255, 255, 255, .76);
  font-size: 17px;
}

.footer {
  padding: 76px 0 36px;
  background: var(--footer-surface);
  color: rgba(255, 255, 255, .74);
}

.footer a {
  color: rgba(255, 255, 255, .9);
}

.footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr .8fr .8fr 1.6fr;
  gap: 40px;
}

.footer-logo {
  max-width: 180px;
  margin-bottom: 20px;
}

.footer p {
  line-height: 1.65;
}

.footer h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.footer ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer li,
.footer p {
  font-size: 14px;
}

.footer-acs {
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
}

.footer-policy-title {
  margin-top: 24px !important;
}

.footer-legal-pdfs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.footer-legal-pdfs a {
  font-size: 13px;
}

.footer-button {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .9);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast) var(--ease);
}

.footer-button:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-bottom p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .54);
  font-size: 13px;
  line-height: 1.65;
}

/* -------------------------------------------------------------------
   12. Forms
   ------------------------------------------------------------------- */
.contact-form {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: var(--ink-3);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}

.contact-form label.privacy-consent {
  display: flex !important;
  grid-template-columns: unset;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 13.5px;
}

.privacy-consent input[type="checkbox"] {
  width: auto;
  min-width: 18px;
  height: 18px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.privacy-consent-text {
  flex: 1;
  min-width: 0;
  line-height: 1.55;
}

.privacy-consent-text a {
  white-space: nowrap;
}

.form-success {
  padding: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.form-success h2 {
  margin: 0 0 12px;
  font-size: 26px;
}

/* -------------------------------------------------------------------
   13. Contact page (icon rows + urgent box)
   ------------------------------------------------------------------- */
.contact-panel.contact-panel--details {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: 24px;
}

.contact-layout-surface > .contact-panel.contact-panel--details {
  flex: 1 1 auto;
}

.complaints-meta {
  margin: 4px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.contact-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
  flex: 0 0 auto;
}

.contact-detail-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--brand);
  border-radius: 11px;
  color: var(--brand);
  background: rgba(168, 32, 26, .06);
  transition: background var(--t-fast) var(--ease);
}

.contact-detail-row:hover .contact-detail-icon {
  background: rgba(168, 32, 26, .12);
}

.contact-detail-icon--large {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

.contact-detail-text {
  min-width: 0;
  flex: 1;
}

.contact-detail-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

.contact-detail-value {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

a.contact-detail-value:hover {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-detail-value--plain {
  font-weight: 600;
}

.contact-urgent-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-shrink: 0;
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(168, 32, 26, .04), rgba(168, 32, 26, .02));
}

.contact-urgent-copy {
  min-width: 0;
  flex: 1;
}

.contact-urgent-title {
  display: block;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.contact-urgent-desc {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.contact-urgent-phone {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.contact-urgent-phone:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

/* -------------------------------------------------------------------
   14. Prose (policy / service-copy blocks)
   ------------------------------------------------------------------- */
.prose {
  max-width: 880px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.7;
}

.prose h2 {
  margin-top: 44px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.prose h2:first-child,
.prose > *:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 16px;
  color: var(--ink-2);
}

.prose ul:not(.check-list) {
  padding-left: 22px;
  margin: 0 0 18px;
}

.prose ul:not(.check-list) li {
  margin-bottom: 8px;
}

.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14.5px;
}

.prose th,
.prose td {
  padding: 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--soft);
  font-weight: 700;
  color: var(--ink);
}

.service-copy-block {
  padding: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.compliance-note {
  padding: 40px;
  background: #fff;
  border-left: 3px solid var(--brand);
}

.compliance-note h2 {
  margin-top: 0;
}

/* -------------------------------------------------------------------
   15. Alarm-response process table
   ------------------------------------------------------------------- */
.process-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  counter-reset: process-step;
}

.process-table > div {
  position: relative;
  counter-increment: process-step;
  padding: 22px 22px 22px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.process-table > div:hover {
  border-color: rgba(14, 17, 22, .14);
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}

.process-table > div::before {
  content: counter(process-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.process-table strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.process-table span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Hide the numeric prefix that lives inside the <strong> on alarm-response */
.process-table strong {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   16. Cookie banner + modal
   ------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-4);
  animation: bannerUp var(--t-slow) var(--ease) .4s both;
}

@keyframes bannerUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.cookie-banner h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.cookie-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 20, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: overlayFade var(--t-base) var(--ease);
}

@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cookie-modal-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: 32px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-4);
  animation: panelUp var(--t-base) var(--ease);
}

@keyframes panelUp {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.modal-close:hover {
  background: var(--line);
}

.cookie-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 16px 0;
  font-weight: 700;
}

.cookie-option span {
  grid-column: 2;
  color: var(--muted);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
}

/* -------------------------------------------------------------------
   17. Contact compliance-card (complaints form page shares .contact-layout)
   ------------------------------------------------------------------- */
.complaints-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* -------------------------------------------------------------------
   18. Legacy / auxiliary classes kept for pages that reference them
   ------------------------------------------------------------------- */
.accreditations-list {
  margin-top: 24px;
}

.policy-content {
  max-width: 880px;
}

.hero-proof-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  max-width: 820px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.hero-proof-grid div {
  padding: 0 28px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}

.hero-proof-grid div:first-child {
  padding-left: 0;
}

.hero-proof-grid div:last-child {
  border-right: 0;
  padding-right: 0;
}

.hero-proof-grid strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-proof-grid span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .65);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* -------------------------------------------------------------------
   19. Dark theme
   ------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f6f8;
  --ink-2: #e4e6eb;
  --ink-3: #c3c7d1;
  --muted: #9aa0ad;
  --muted-2: #767a88;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .06);
  --soft: #1a1c22;
  --paper: #0d0f14;
  --white: #16181e;
  --navy: #000000;
  --band-dark: #000000;
  --footer-surface: #000000;
  --brand-glow: rgba(168, 32, 26, .4);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, .7);
  --shadow-3: 0 24px 48px -16px rgba(0, 0, 0, .8);
  --shadow-4: 0 40px 80px -24px rgba(0, 0, 0, .9);
}

[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink-2);
}

[data-theme="dark"] .section {
  background: var(--paper);
}

[data-theme="dark"] .section:nth-of-type(even),
[data-theme="dark"] .section-alt {
  background: #11131a !important;
}

[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .section h2,
[data-theme="dark"] .cta-band h2,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3 {
  color: var(--ink);
}

[data-theme="dark"] .section p,
[data-theme="dark"] .section-heading p:not(.eyebrow),
[data-theme="dark"] .prose p,
[data-theme="dark"] .prose li {
  color: var(--muted);
}

[data-theme="dark"] .trust-strip {
  background: var(--paper);
  border-bottom-color: var(--line);
}

[data-theme="dark"] .trust-grid span {
  background: var(--white);
  color: var(--ink-2);
  border-color: var(--line);
}

[data-theme="dark"] .trust-grid span:hover {
  background: #1c1e26;
  border-color: rgba(255, 255, 255, .18);
}

[data-theme="dark"] .partner-strip {
  background: linear-gradient(180deg, var(--white), var(--paper));
  border-bottom-color: var(--line);
}

[data-theme="dark"] .partner-rail::before {
  background: linear-gradient(90deg, var(--paper) 0%, transparent 100%);
}

[data-theme="dark"] .partner-rail::after {
  background: linear-gradient(270deg, var(--paper) 0%, transparent 100%);
}

[data-theme="dark"] .partner-rail li {
  background: var(--white);
  border-color: var(--line);
}

[data-theme="dark"] .partner-rail img {
  filter: saturate(.85) contrast(1.1) brightness(1.05);
}

[data-theme="dark"] .top-bar {
  background: #000;
  border-bottom: none;
}

[data-theme="dark"] .site-header {
  background: rgba(13, 15, 20, .72);
}

[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(13, 15, 20, .92);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -10px rgba(0, 0, 0, .7);
}

[data-theme="dark"] .site-header .brand img {
  filter: brightness(0) invert(1);
}

[data-theme="dark"] .primary-nav > a,
[data-theme="dark"] .nav-services > summary {
  color: rgba(255, 255, 255, .84);
}

[data-theme="dark"] .primary-nav > a:hover,
[data-theme="dark"] .nav-services > summary:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

[data-theme="dark"] .primary-nav > a.active {
  color: #fff;
}

[data-theme="dark"] .header-phone {
  color: rgba(255, 255, 255, .88);
}

[data-theme="dark"] .service-menu {
  background: #14161d;
  border-color: var(--line);
}

[data-theme="dark"] .service-menu a {
  color: rgba(255, 255, 255, .88);
}

[data-theme="dark"] .service-menu a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

[data-theme="dark"] .nav-toggle {
  background: #14161d;
  border-color: var(--line);
}

[data-theme="dark"] .nav-toggle span:not(.sr-only) {
  background: #fff;
}

[data-theme="dark"] .theme-toggle {
  border-color: var(--line);
  color: rgba(255, 255, 255, .88);
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

[data-theme="dark"] .info-card,
[data-theme="dark"] .decision-card,
[data-theme="dark"] .service-highlights article,
[data-theme="dark"] .sector-grid article,
[data-theme="dark"] .process-grid article,
[data-theme="dark"] .service-card,
[data-theme="dark"] .quality-card,
[data-theme="dark"] .contact-panel,
[data-theme="dark"] .compliance-note,
[data-theme="dark"] .service-copy-block,
[data-theme="dark"] .process-table > div,
[data-theme="dark"] .cookie-banner,
[data-theme="dark"] .cookie-modal-panel,
[data-theme="dark"] .form-success,
[data-theme="dark"] .contact-form {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink-2);
}

[data-theme="dark"] .info-card:hover,
[data-theme="dark"] .decision-card:hover,
[data-theme="dark"] .service-highlights article:hover,
[data-theme="dark"] .sector-grid article:hover,
[data-theme="dark"] .process-grid article:hover {
  border-color: rgba(255, 255, 255, .18);
}

[data-theme="dark"] .service-card:hover {
  border-color: rgba(255, 255, 255, .18);
}

[data-theme="dark"] .service-card img {
  background: #2a2c34;
}

[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card h2,
[data-theme="dark"] .info-card h3,
[data-theme="dark"] .info-card h2,
[data-theme="dark"] .decision-card h3,
[data-theme="dark"] .service-highlights h3,
[data-theme="dark"] .sector-grid h3,
[data-theme="dark"] .process-grid h3,
[data-theme="dark"] .process-table strong,
[data-theme="dark"] .contact-panel h2,
[data-theme="dark"] .contact-layout > div > h2 {
  color: var(--ink);
}

[data-theme="dark"] .service-card p,
[data-theme="dark"] .info-card p,
[data-theme="dark"] .decision-card p,
[data-theme="dark"] .service-highlights p,
[data-theme="dark"] .sector-grid p,
[data-theme="dark"] .process-grid p,
[data-theme="dark"] .process-table span,
[data-theme="dark"] .contact-layout > div > p {
  color: var(--muted);
}

[data-theme="dark"] .check-list li {
  color: var(--ink-2);
}

[data-theme="dark"] .service-card-icon {
  background: rgba(22, 24, 30, .96);
  color: #ff6b62;
}

[data-theme="dark"] .contact-detail-icon {
  background: rgba(168, 32, 26, .14);
}

[data-theme="dark"] .contact-detail-label {
  color: #ff6b62;
}

[data-theme="dark"] .contact-detail-value,
[data-theme="dark"] .contact-detail-value--plain,
[data-theme="dark"] .contact-urgent-title {
  color: var(--ink);
}

[data-theme="dark"] a.contact-detail-value:hover,
[data-theme="dark"] .contact-urgent-phone,
[data-theme="dark"] .privacy-consent-text a {
  color: #ff6b62;
}

[data-theme="dark"] .contact-urgent-box {
  background: linear-gradient(135deg, rgba(168, 32, 26, .1), rgba(168, 32, 26, .04));
  border-color: var(--line);
}

[data-theme="dark"] .contact-urgent-desc {
  color: var(--muted);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea {
  background: #0a0c11;
  color: var(--ink);
  border-color: var(--line);
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, .42);
}

[data-theme="dark"] .contact-form select option {
  background: #0a0c11;
  color: var(--ink);
}

[data-theme="dark"] .contact-form label {
  color: var(--ink);
}

[data-theme="dark"] .privacy-consent {
  color: var(--muted) !important;
}

[data-theme="dark"] .skip-link {
  background: var(--white);
  color: var(--ink);
}

[data-theme="dark"] .cookie-banner {
  background: rgba(22, 24, 30, .96);
}

[data-theme="dark"] .cookie-banner h2,
[data-theme="dark"] .cookie-modal-panel h2,
[data-theme="dark"] .form-success h2 {
  color: var(--ink);
}

[data-theme="dark"] .cookie-banner p,
[data-theme="dark"] .cookie-modal-panel p,
[data-theme="dark"] .cookie-option span,
[data-theme="dark"] .form-success p {
  color: var(--muted);
}

[data-theme="dark"] .modal-close {
  background: rgba(255, 255, 255, .08);
  color: var(--ink);
}

[data-theme="dark"] .modal-close:hover {
  background: rgba(255, 255, 255, .14);
}

[data-theme="dark"] .prose th {
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
}

[data-theme="dark"] .prose th,
[data-theme="dark"] .prose td {
  border-color: var(--line);
}

[data-theme="dark"] .prose strong {
  color: var(--ink);
}

/* -------------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .service-grid,
  .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-content {
    padding-left: clamp(28px, 6%, 80px);
  }
}

@media (max-width: 980px) {
  .top-bar-inner {
    flex-wrap: wrap;
    padding: 6px 0;
    gap: 4px 16px;
  }

  .nav-shell {
    min-height: 72px;
  }

  .site-header.is-scrolled .nav-shell {
    min-height: 64px;
  }

  .theme-toggle {
    margin-left: auto;
    order: 2;
  }

  .header-phone {
    display: inline-flex;
    order: 1;
    margin-left: auto;
  }

  .nav-toggle {
    display: flex;
    margin-left: 0;
    order: 3;
  }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 18px 28px 26px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-3);
  }

  [data-theme="dark"] .primary-nav {
    background: var(--white);
    border-bottom-color: var(--line);
  }

  .primary-nav.is-open {
    display: flex;
    animation: menuFadeIn var(--t-base) var(--ease);
  }

  .primary-nav > a,
  .nav-services > summary {
    padding: 14px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line-2);
  }

  .primary-nav > a.active::after {
    display: none;
  }

  .nav-cta {
    margin-top: 8px;
    padding: 14px 20px !important;
    border-radius: var(--radius-sm) !important;
    text-align: center;
  }

  .service-menu {
    position: static;
    width: auto;
    padding: 6px 0 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  [data-theme="dark"] .service-menu {
    background: transparent;
  }

  .home-hero {
    min-height: 640px;
  }

  .hero {
    min-height: 480px;
  }

  .hero-content {
    padding: 68px 28px;
  }

  .hero h1 {
    font-size: clamp(36px, 6vw, 60px);
  }

  .split,
  .home-intro-grid,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .trust-grid,
  .service-highlights,
  .service-grid,
  .card-grid,
  .values-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wide-card {
    grid-column: span 2;
  }

  .section {
    padding: 80px 0;
  }

  .section-compact {
    padding: 64px 0;
  }

  .cookie-banner {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .top-bar p {
    display: none;
  }

  .top-bar-inner {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .container,
  .card-grid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .top-bar {
    display: none;
  }

  .brand img {
    max-width: 160px;
    max-height: 62px;
  }

  .nav-shell {
    min-height: 68px;
  }

  .primary-nav {
    top: 68px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .header-phone {
    font-size: 14px;
  }

  .home-hero {
    min-height: 680px;
  }

  .hero {
    min-height: 520px;
  }

  .hero-content {
    padding: 60px 20px 80px;
  }

  .hero h1 {
    font-size: clamp(34px, 8vw, 44px);
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .hero-actions,
  .home-cta-row,
  .cookie-actions,
  .modal-actions {
    display: grid;
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  .section {
    padding: 64px 0;
  }

  .section-heading h2,
  .section h2,
  .cta-band h2 {
    font-size: clamp(26px, 7vw, 34px);
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .trust-grid,
  .decision-grid,
  .service-highlights,
  .service-grid,
  .sector-grid,
  .card-grid,
  .values-grid,
  .process-grid,
  .footer-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .wide-card {
    grid-column: span 1;
  }

  .intro-image {
    min-height: 280px;
  }

  .partner-strip {
    padding: 20px 0;
  }

  .partner-rail {
    padding: 0 20px;
  }

  .partner-rail::before,
  .partner-rail::after {
    width: 44px;
  }

  .partner-rail li {
    width: 140px;
    height: 78px;
    padding: 12px 16px;
  }

  .service-copy-block,
  .compliance-note,
  .info-card,
  .contact-panel,
  .decision-card,
  .contact-form {
    padding: 24px;
  }

  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px;
  }

  .cookie-modal {
    padding: 14px;
  }

  .cookie-modal-panel {
    padding: 24px;
  }

  .scroll-cue {
    display: none;
  }
}

/* -------------------------------------------------------------------
   21. Scroll reveals (driven by script.js)
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.kbg-animate-on-scroll {
    --reveal-dur: 720ms;
    --reveal-dur-slow: 1000ms;
    --reveal-ease: cubic-bezier(.16, 1, .3, 1);
  }

  /* IMPORTANT: sections themselves never fade — they stay fully
     opaque so section backgrounds (dark / light / alt) never flash
     against the body colour between breakpoints. Only child elements
     within explicitly staggered grids animate. */
  html.kbg-animate-on-scroll .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }

  /* Stagger children inside grids that are marked with data-stagger */
  html.kbg-animate-on-scroll .reveal-on-scroll[data-stagger] > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--reveal-dur) var(--reveal-ease),
      transform var(--reveal-dur) var(--reveal-ease);
    transition-delay: calc(var(--stagger-index, 0) * 60ms + 40ms);
  }

  html.kbg-animate-on-scroll .reveal-on-scroll[data-stagger].is-revealed > * {
    opacity: 1;
    transform: none;
  }

  /* Hero: hold the band in place, slide copy children */
  html.kbg-animate-on-scroll .hero.reveal-on-scroll:not(.is-revealed),
  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.kbg-animate-on-scroll .hero.reveal-on-scroll:not(.is-revealed) .hero-content > * {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }

  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed .hero-content > * {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--reveal-dur-slow) var(--reveal-ease),
      transform var(--reveal-dur-slow) var(--reveal-ease);
  }

  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed .hero-content > *:nth-child(1) { transition-delay: 40ms; }
  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed .hero-content > *:nth-child(2) { transition-delay: 140ms; }
  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed .hero-content > *:nth-child(3) { transition-delay: 240ms; }
  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed .hero-content > *:nth-child(4) { transition-delay: 340ms; }
  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed .hero-content > *:nth-child(5) { transition-delay: 440ms; }
  html.kbg-animate-on-scroll .hero.reveal-on-scroll.is-revealed .hero-content > *:nth-child(6) { transition-delay: 540ms; }

  /* Hero media: very subtle zoom-settle on load */
  .hero.is-revealed .hero-media {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0 !important;
    transition-duration: .001ms !important;
  }

  html.kbg-animate-on-scroll .reveal-on-scroll,
  html.kbg-animate-on-scroll .reveal-on-scroll[data-stagger] > *,
  html.kbg-animate-on-scroll .hero .hero-content > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===================================================================
   22. Consistency pass — per-service background positioning only
   =================================================================== */
/* Inner hero height, padding, and type scale live in section 36 —
   this block only controls where each background image is cropped
   so faces and focal points land well. Never overrides height. */
.hero.page-hero--key-holding .hero-media {
  background-position: center 46%;
}

.hero.page-hero--contact .hero-media {
  background-position: center 44%;
}

.hero.page-hero--services .hero-media {
  background-position: 54% 8%;
}

.hero.page-hero--manned-guarding .hero-media {
  background-position: center 22%;
}

.hero.page-hero--mobile-patrols .hero-media {
  background-position: center 56%;
}

.hero.page-hero--door .hero-media {
  background-position: center 28%;
}

.hero.page-hero--temporary-cctv .hero-media {
  background-position: center 35%;
}

/* Red accent rule above the hero h1 — appears on every hero unless
   the hero-content has a breadcrumb (which already establishes
   section context) */
.hero h1 {
  position: relative;
}

.hero h1::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 22px;
  background: var(--brand);
  border-radius: 2px;
  opacity: .95;
}

/* Breadcrumbs sit inside the hero-content, above the eyebrow.
   Block-level so they never flow onto the same line as the eyebrow. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .64);
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.breadcrumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.breadcrumbs a:hover {
  color: #fff;
  text-decoration: none;
}

.breadcrumbs [aria-current="page"] {
  color: #fff;
}

/* When breadcrumbs are present (they are not injected on any page
   currently but kept here for future use), hide the redundant
   eyebrow and the red accent rule to avoid visual stacking. */
.hero-content:has(.breadcrumbs) .eyebrow {
  display: none;
}

.hero-content:has(.breadcrumbs) h1::before {
  display: none;
}

/* ===================================================================
   23. Editorial service-copy-block
   =================================================================== */
/* The first service-copy-block on a service page (lives directly under
   .section, not .section-alt) becomes a two-column editorial layout
   with a sticky heading and 2-col check grid. Section-alt variants
   become a chip cloud for sector lists. */
.section > .container > .service-copy-block,
.section .service-copy-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 48px 64px;
  padding: 56px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  max-width: var(--max);
  margin: 0 auto;
}

.service-copy-block > h2 {
  grid-column: 1;
  margin: 0;
  align-self: start;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
}

.service-copy-block > p {
  grid-column: 2;
  grid-row: span 1;
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
}

.service-copy-block > p + h2,
.service-copy-block > p:first-child + h2 {
  grid-column: 1;
}

.service-copy-block > ul.check-list {
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 36px;
  margin: 0;
}

/* Section-alt variant: chip cloud — used for "Sector Use Cases",
   "Events We Cover", "Ideal For", "Why …?", etc. */
.section-alt .service-copy-block {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.section-alt .service-copy-block > ul.check-list {
  grid-template-columns: unset;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.section-alt .service-copy-block > ul.check-list li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px 10px 38px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.section-alt .service-copy-block > ul.check-list li::before {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}

.section-alt .service-copy-block > ul.check-list li:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* ===================================================================
   24. .split.align-start on service pages — chip pair layout
   =================================================================== */
/* Used on key-holding and temporary-cctv for "Ideal For" / "Why …?" */
.section-alt .split.align-start .check-list,
.section .split.align-start > div .check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.section-alt .split.align-start .check-list li,
.section .split.align-start > div .check-list li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px 10px 38px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.section-alt .split.align-start .check-list li::before,
.section .split.align-start > div .check-list li::before {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}

.section-alt .split.align-start .check-list li:hover,
.section .split.align-start > div .check-list li:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.section-alt .split.align-start h2,
.section .split.align-start > div h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0 0 4px;
}

/* ===================================================================
   25. Dark compliance panel (with lock icon injected by JS)
   =================================================================== */
.compliance-note {
  position: relative;
  padding: 56px 56px 56px 120px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(168, 32, 26, .12) 0%, transparent 60%),
    #111419;
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.compliance-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, transparent 70%);
  pointer-events: none;
}

.compliance-note > * {
  position: relative;
}

.compliance-note .compliance-icon {
  position: absolute;
  top: 52px;
  left: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(168, 32, 26, .15);
  border: 1px solid rgba(168, 32, 26, .4);
  border-radius: 12px;
  color: #ff6b62;
}

.compliance-note .compliance-icon svg {
  width: 22px;
  height: 22px;
}

.compliance-note .eyebrow {
  color: #ff6b62;
}

.compliance-note h2 {
  color: #fff;
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.compliance-note p {
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.7;
  max-width: 780px;
}

[data-theme="dark"] .compliance-note {
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(168, 32, 26, .22) 0%, transparent 60%),
    #000000;
  border-color: rgba(255, 255, 255, .08);
  border-left-color: var(--brand);
}

/* ===================================================================
   26. Accreditation cards with icon slot
   =================================================================== */
.accreditations-list.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accreditations-list .info-card {
  position: relative;
  padding: 30px 30px 30px 92px;
  min-height: 180px;
}

.accreditations-list .info-card .accr-icon {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168, 32, 26, .14), rgba(168, 32, 26, .04));
  border: 1px solid rgba(168, 32, 26, .3);
  border-radius: 12px;
  color: var(--brand);
}

.accreditations-list .info-card .accr-icon svg {
  width: 22px;
  height: 22px;
}

.accreditations-list .info-card h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .accreditations-list .info-card .accr-icon {
  background: linear-gradient(135deg, rgba(168, 32, 26, .22), rgba(168, 32, 26, .08));
  border-color: rgba(168, 32, 26, .5);
  color: #ff6b62;
}

@media (max-width: 980px) {
  .accreditations-list.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .accreditations-list.card-grid {
    grid-template-columns: 1fr;
  }
  .accreditations-list .info-card {
    padding: 26px 24px 26px 24px;
  }
  .accreditations-list .info-card .accr-icon {
    position: static;
    margin-bottom: 16px;
  }
}

/* ===================================================================
   27. "Why Choose KBG" — cinematic dark rhythm on homepage
   =================================================================== */
.section:has(.why-kbg-grid) {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(168, 32, 26, .24) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 20% 100%, rgba(168, 32, 26, .14) 0%, transparent 55%),
    #0b0d12 !important;
  color: #fff;
  overflow: hidden;
}

.section:has(.why-kbg-grid)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, transparent 70%);
  pointer-events: none;
}

.section:has(.why-kbg-grid) > * {
  position: relative;
}

.section:has(.why-kbg-grid) h2,
.section:has(.why-kbg-grid) .eyebrow {
  color: #fff;
}

.section:has(.why-kbg-grid) .eyebrow {
  color: #ff6b62;
}

.section:has(.why-kbg-grid) .info-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.section:has(.why-kbg-grid) .info-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  transform: translateY(-4px);
}

.section:has(.why-kbg-grid) .info-card h3 {
  color: #fff;
}

.section:has(.why-kbg-grid) .info-card p {
  color: rgba(255, 255, 255, .72);
}

/* Number badge on each why-kbg card, injected via JS counter */
.section:has(.why-kbg-grid) .info-card {
  counter-increment: why-kbg;
  padding-top: 76px;
}

.section:has(.why-kbg-grid) .why-kbg-grid {
  counter-reset: why-kbg;
}

.section:has(.why-kbg-grid) .info-card::before {
  content: counter(why-kbg, decimal-leading-zero);
  position: absolute;
  top: 28px;
  left: 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #ff6b62;
}

.section:has(.why-kbg-grid) .info-card {
  position: relative;
}

/* ===================================================================
   28. Connected process flow (alarm-response)
   =================================================================== */
@media (min-width: 981px) {
  .process-table {
    position: relative;
  }

  .process-table > div {
    position: relative;
  }

  /* Subtle connector between steps (horizontal rows) */
  .process-table > div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    width: 14px;
    height: 1px;
    background: linear-gradient(90deg, var(--brand) 0%, transparent 100%);
    opacity: .35;
    pointer-events: none;
  }
}

/* ===================================================================
   29. Hero subtitle upscale on inner pages
   =================================================================== */
.hero.page-hero:not(.home-hero) .hero-subtitle {
  font-size: clamp(16px, 1.25vw, 19px);
  max-width: 760px;
}

/* ===================================================================
   30. Policy page — prose hero slot (privacy/cookie/accessibility)
   =================================================================== */
.prose.policy-content {
  background: #fff;
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

[data-theme="dark"] .prose.policy-content {
  background: var(--white);
  border-color: var(--line);
}

.prose.policy-content strong {
  color: var(--ink);
  font-weight: 700;
}

/* ===================================================================
   31. Footer refinements
   =================================================================== */
.footer-logo {
  filter: brightness(1.05);
}

.footer li {
  transition: transform var(--t-fast) var(--ease);
}

.footer li:has(> a:hover) {
  transform: translateX(2px);
}

/* ===================================================================
   32. Responsive refinements for the editorial / chip layouts
   =================================================================== */
@media (max-width: 980px) {
  .service-copy-block {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 36px !important;
  }

  .service-copy-block > h2,
  .service-copy-block > p,
  .service-copy-block > ul.check-list {
    grid-column: 1 !important;
  }

  .service-copy-block > ul.check-list {
    grid-template-columns: 1fr !important;
  }

  .compliance-note {
    padding: 40px 32px 40px 32px !important;
  }

  .compliance-note .compliance-icon {
    position: static;
    margin-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .hero h1::before {
    width: 40px;
    height: 2px;
    margin-bottom: 16px;
  }

  .service-copy-block {
    padding: 28px !important;
  }

  .section-alt .service-copy-block > ul.check-list li,
  .section-alt .split.align-start .check-list li,
  .section .split.align-start > div .check-list li {
    font-size: 13.5px;
    padding: 9px 14px 9px 34px;
  }
}

/* ===================================================================
   33. Motion & polish — global hover/focus consistency
   =================================================================== */
.btn,
.service-card,
.info-card,
.decision-card,
.service-highlights article,
.sector-grid article,
.process-grid article,
.process-table > div,
.trust-grid span,
.partner-rail li,
.accreditations-list .info-card {
  transform: translateZ(0);
}

/* Reduce jitter on hover-lifted cards by pre-committing to a layer */
.service-card,
.info-card,
.accreditations-list .info-card {
  will-change: transform;
}

/* Keyboard focus inside dark sections — keep ring visible */
.section:has(.why-kbg-grid) :focus-visible,
.compliance-note :focus-visible,
.cta-band :focus-visible {
  outline-color: rgba(255, 107, 98, .7);
}

/* ===================================================================
   34. Fine-grained dark-mode overrides for the new elements
   =================================================================== */
[data-theme="dark"] .service-copy-block {
  background: var(--white);
  border-color: var(--line);
}

[data-theme="dark"] .section-alt .service-copy-block > ul.check-list li,
[data-theme="dark"] .section-alt .split.align-start .check-list li,
[data-theme="dark"] .section .split.align-start > div .check-list li {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink-2);
}

[data-theme="dark"] .section-alt .service-copy-block > ul.check-list li:hover,
[data-theme="dark"] .section-alt .split.align-start .check-list li:hover,
[data-theme="dark"] .section .split.align-start > div .check-list li:hover {
  border-color: #ff6b62;
  color: #ff6b62;
}

/* ===================================================================
   35. Home hero — fits the first viewport
   =================================================================== */
/* Height is clamped to the available viewport minus top bar + header
   so the hero, stats, and services rail are all visible on load
   without scrolling. Falls back to a sensible minimum on very short
   viewports. */
.home-hero {
  min-height: max(620px, calc(100svh - 120px));
  max-height: 880px;
  padding-bottom: 0;
}

.home-hero .hero-content {
  padding-top: clamp(56px, 7vh, 96px);
  padding-bottom: clamp(110px, 14vh, 150px);
}

/* Stats strip — single glass panel of four credential chips */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: 0;
  margin: clamp(20px, 3vh, 36px) 0 0;
  padding: 18px 8px;
  width: fit-content;
  max-width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero-stats > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 4px 16px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.hero-stats > span:first-child {
  padding-left: 16px;
}

.hero-stats > span:last-child {
  border-right: 0;
  padding-right: 16px;
}

/* Icon slot injected by JS */
.hero-stats .hero-stat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 32, 26, .14);
  border: 1px solid rgba(168, 32, 26, .4);
  border-radius: 9px;
  color: #ff6b62;
}

.hero-stats .hero-stat-icon svg {
  width: 18px;
  height: 18px;
}

.hero-stats .hero-stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hero-stats strong {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-stats em {
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
}

/* Floating services rail along the bottom of the home hero */
.hero-rail {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: var(--max);
  padding: 0 32px;
  pointer-events: none;
}

.hero-rail-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-rail-label::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .4);
}

.hero-rail-track {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  pointer-events: auto;
  padding: 4px 0;
  scroll-snap-type: x mandatory;
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.hero-rail-track::-webkit-scrollbar {
  display: none;
}

.hero-rail-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  scroll-snap-align: start;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.hero-rail-chip:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ===================================================================
   36. Inner-page heroes — one fixed silhouette for every page
   =================================================================== */
/* Every inner hero fills the full viewport regardless of title
   length, image size, or browser chrome. Uses dvh so it adapts
   cleanly on mobile. */
.hero.page-hero:not(.home-hero) {
  height: auto !important;
  min-height: calc(100vh + var(--header-height, 84px)) !important;
  min-height: calc(100dvh + var(--header-height, 84px)) !important;
  max-height: none !important;
}

.hero.page-hero:not(.home-hero) .hero-content {
  padding-top: calc(var(--header-height, 84px) + clamp(96px, 12vh, 132px));
  padding-bottom: clamp(64px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
  height: 100dvh;
}

/* Inner-page h1 scale — bigger, confident, consistent */
.hero.page-hero:not(.home-hero) h1 {
  font-size: clamp(40px, 5.2vw, 68px);
  max-width: 920px;
  line-height: 1.04;
  letter-spacing: var(--tracking-tighter);
}

.hero.page-hero:not(.home-hero) .hero-subtitle {
  font-size: clamp(17px, 1.35vw, 20px);
  max-width: 780px;
  line-height: 1.55;
}

.hero.page-hero--temporary-cctv h1 {
  max-width: 920px;
}

.hero.page-hero--temporary-cctv .hero-subtitle {
  display: -webkit-box;
  max-width: 780px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* Bigger breadcrumb so it reads clearly against the full hero */
.hero.page-hero:not(.home-hero) .breadcrumbs {
  margin-bottom: 28px;
}

/* ===================================================================
   37. Home hero typography — scales with viewport so it always fits
   =================================================================== */
.home-hero h1 {
  font-size: clamp(36px, 5.8vw, 72px);
  max-width: 920px;
  margin-bottom: clamp(14px, 2vh, 22px);
}

.home-hero .hero-subtitle {
  font-size: clamp(15px, 1.25vw, 19px);
  max-width: 720px;
  margin-bottom: clamp(16px, 2.4vh, 28px);
}

/* Subtle brand gradient text highlight on the closing word */
.home-hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #ff6b62 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===================================================================
   38. Responsive — home rail + inner heroes
   =================================================================== */
@media (max-width: 980px) {
  .home-hero {
    min-height: max(580px, calc(100svh - 110px));
    max-height: none;
  }

  .home-hero .hero-content {
    padding-bottom: 150px;
  }

  .hero-stats {
    gap: 14px 0;
    padding-top: 20px;
    margin-top: 32px;
  }

  .hero-stats > span {
    padding: 0 20px;
    flex: 1 1 45%;
  }

  .hero-stats > span:nth-child(odd) {
    padding-left: 0;
  }

  .hero-stats > span:nth-child(2),
  .hero-stats > span:last-child {
    border-right: 0;
    padding-right: 0;
  }

  .hero-rail {
    padding-left: 28px;
    padding-right: 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    bottom: 20px;
  }

  .hero-rail-label {
    padding-left: 4px;
  }

  .hero-rail-label::after {
    display: none;
  }

  .hero-rail-track {
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
  }

  .hero.page-hero:not(.home-hero) {
    height: auto !important;
    min-height: calc(100vh + var(--header-height, 72px)) !important;
    min-height: calc(100dvh + var(--header-height, 72px)) !important;
    max-height: none !important;
  }

  .hero.page-hero:not(.home-hero) .hero-content {
    padding-top: calc(var(--header-height, 72px) + 82px);
    padding-bottom: 60px;
  }

  .hero.page-hero:not(.home-hero) h1 {
    font-size: clamp(34px, 5.6vw, 48px);
  }

  .hero.page-hero--temporary-cctv h1 {
    font-size: clamp(31px, 5vw, 42px);
  }
}

@media (max-width: 640px) {
  .home-hero {
    min-height: max(620px, calc(100svh - 64px));
    max-height: none;
  }

  .home-hero .hero-content {
    padding-bottom: 160px;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }

  .hero-stats > span {
    padding: 0;
    border-right: 0;
  }

  .hero-stats strong {
    font-size: 17px;
  }

  .hero-rail {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-rail-chip {
    font-size: 12.5px;
    padding: 8px 14px;
  }

  .hero.page-hero:not(.home-hero) {
    height: auto !important;
    min-height: calc(100vh + var(--header-height, 68px)) !important;
    min-height: calc(100dvh + var(--header-height, 68px)) !important;
    max-height: none !important;
  }

  .hero.page-hero:not(.home-hero) .hero-content {
    padding-top: calc(var(--header-height, 68px) + 58px);
    padding-bottom: 50px;
  }

  .hero.page-hero:not(.home-hero) h1 {
    font-size: clamp(30px, 7.2vw, 42px);
  }

  .hero.page-hero--temporary-cctv h1 {
    font-size: clamp(27px, 6.4vw, 36px);
  }
}

/* ===================================================================
   39. Numbers section — cinematic stats with count-up
   =================================================================== */
.section-numbers {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(168, 32, 26, .22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(168, 32, 26, .14) 0%, transparent 50%),
    #0b0d12 !important;
  color: #fff;
  overflow: hidden;
}

.section-numbers::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, transparent 72%);
  pointer-events: none;
}

.section-numbers > * {
  position: relative;
}

.numbers-heading {
  max-width: 680px;
  margin: 0 0 clamp(40px, 6vw, 72px);
}

.numbers-heading .eyebrow {
  color: #ff6b62;
}

.numbers-heading h2 {
  color: #fff;
  margin: 0 0 16px;
}

.numbers-heading p {
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.numbers-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.numbers-grid li {
  position: relative;
  padding: 36px 32px 34px;
  border-right: 1px solid rgba(255, 255, 255, .1);
  transition: background var(--t-base) var(--ease);
}

.numbers-grid li:last-child {
  border-right: 0;
}

.numbers-grid li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}

.numbers-grid li:hover {
  background: rgba(255, 255, 255, .03);
}

.numbers-grid li:hover::after {
  transform: scaleX(1);
}

.numbers-value {
  display: block;
  color: #fff;
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 16px;
}

.numbers-label {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}

.numbers-desc {
  display: block;
  color: rgba(255, 255, 255, .6);
  font-size: 13.5px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .numbers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-left: 1px solid rgba(255, 255, 255, .1);
  }

  .numbers-grid li {
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .numbers-grid li:nth-child(2n) {
    border-right: 0;
  }

  .numbers-grid li:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .numbers-grid {
    grid-template-columns: 1fr;
    border-left: 0;
  }

  .numbers-grid li {
    padding: 24px 0;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  }

  .numbers-grid li:last-child {
    border-bottom: 0 !important;
  }

  .numbers-value {
    font-size: 56px;
  }
}

/* Hero extends UNDER the transparent header until the user scrolls */
main > .hero:first-child,
main > section.hero.page-hero:first-child {
  margin-top: calc(var(--header-height, 84px) * -1);
}

/* Give the hero content room to clear the header (adds to the
   existing padding-top on .hero-content) */
main > .hero:first-child .hero-content,
main > section.hero.page-hero:first-child .hero-content {
  padding-top: calc(var(--header-height, 84px) + clamp(40px, 6vh, 72px));
}

/* Home hero is already tall; just ensure the top padding still works */
main > .home-hero.hero:first-child .hero-content {
  padding-top: calc(var(--header-height, 84px) + clamp(32px, 5vh, 64px));
}

/* ===================================================================
   39. Governance / policy cards — homepage download grid
   =================================================================== */
.policies-section {
  background: var(--paper);
}

[data-theme="dark"] .policies-section {
  background: var(--paper);
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.policy-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 22px 22px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none !important;
  box-shadow: var(--shadow-1);
  transition:
    transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background var(--t-base) var(--ease);
}

.policy-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 17, 22, .14);
  box-shadow: var(--shadow-3);
  color: var(--ink);
  text-decoration: none !important;
}

.policy-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(168, 32, 26, .14), rgba(168, 32, 26, .04));
  border: 1px solid rgba(168, 32, 26, .3);
  border-radius: 11px;
  color: var(--brand);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.policy-card-icon svg {
  width: 22px;
  height: 22px;
}

.policy-card:hover .policy-card-icon {
  background: var(--brand);
  color: #fff;
}

.policy-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.policy-card-body strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.policy-card-body span {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}

.policy-card-meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  flex-shrink: 0;
}

.policy-card:hover .policy-card-meta {
  color: var(--brand);
  transform: translateX(2px);
}

/* Dark mode */
[data-theme="dark"] .policy-card {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .policy-card:hover {
  border-color: rgba(255, 255, 255, .2);
  color: var(--ink);
}

[data-theme="dark"] .policy-card-body strong {
  color: var(--ink);
}

[data-theme="dark"] .policy-card-body span {
  color: var(--muted);
}

[data-theme="dark"] .policy-card-icon {
  background: linear-gradient(135deg, rgba(168, 32, 26, .22), rgba(168, 32, 26, .08));
  border-color: rgba(168, 32, 26, .5);
  color: #ff6b62;
}

[data-theme="dark"] .policy-card:hover .policy-card-meta {
  color: #ff6b62;
}

@media (max-width: 1180px) {
  .policy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .policy-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   40. Accreditations badge grid — visual card layout
   =================================================================== */
.accr-badge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.accr-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 40px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.accr-badge-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 17, 22, .14);
  box-shadow: var(--shadow-3);
}

.accr-badge-visual {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168, 32, 26, .12), rgba(168, 32, 26, .04));
  border: 1px solid rgba(168, 32, 26, .3);
  border-radius: 16px;
  color: var(--brand);
  flex-shrink: 0;
  flex-grow: 0;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.accr-badge-card:hover .accr-badge-visual {
  background: var(--brand);
  color: #fff;
}

.accr-badge-visual svg {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px;
  max-height: 32px;
  display: block;
}

.accr-badge-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}

.accr-badge-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Dark mode */
[data-theme="dark"] .accr-badge-card {
  background: var(--white);
  border-color: var(--line);
}

[data-theme="dark"] .accr-badge-card:hover {
  border-color: rgba(255, 255, 255, .18);
}

[data-theme="dark"] .accr-badge-card h3 {
  color: var(--ink);
}

[data-theme="dark"] .accr-badge-card p {
  color: var(--muted);
}

[data-theme="dark"] .accr-badge-visual {
  background: linear-gradient(135deg, rgba(168, 32, 26, .22), rgba(168, 32, 26, .08));
  border-color: rgba(168, 32, 26, .5);
  color: #ff6b62;
}

[data-theme="dark"] .accr-badge-card:hover .accr-badge-visual {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 1180px) {
  .accr-badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .accr-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .accr-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .accr-badge-card {
    padding: 24px 16px;
  }

  .accr-badge-visual {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }

  .accr-badge-visual svg {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px;
    max-height: 26px;
  }
}

/* ===================================================================
   36. Home hero v2 — sharper hierarchy, directional overlay,
       glass trust pillars, ghost CTA, Ken Burns.
       All rules scoped to .hero-v2 so other heroes are untouched.
   =================================================================== */

/* Push the existing trust strip spacer so the v2 trust row sits inside
   the hero itself. (The old .trust-strip section has been removed from
   the home page; rule kept only in case other pages ever include it.) */

/* Directional overlay: deep ink on the left, almost transparent on the
   right so the photo is actually visible. Small brand-red glow in the
   bottom-left quadrant to tie in with the logo. */
.hero-v2 .hero-shade {
  background:
    linear-gradient(95deg,
      rgba(8, 10, 14, .94) 0%,
      rgba(10, 13, 18, .82) 30%,
      rgba(14, 17, 22, .48) 60%,
      rgba(14, 17, 22, .18) 82%,
      rgba(14, 17, 22, .06) 100%),
    radial-gradient(ellipse 55% 45% at 12% 82%, rgba(168, 32, 26, .28) 0%, transparent 60%);
}

.hero-v2 .hero-shade::after {
  /* Soft top fade so the floating nav stays readable, plus a subtle
     base fade so the trust row pops off the image. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 20%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5) 100%);
}

/* Corner vignette — very gentle, keeps focus on the left copy */
.hero-v2 .hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%);
  pointer-events: none;
}

/* Shift focal point of the background to the right so the subjects
   on the right side of the photo aren't cropped against the text. */
.hero-v2 .hero-media {
  background-position: 68% center;
}

/* Extra breathing room, as requested */
.hero-v2 .hero-content {
  padding-top: 112px;
  padding-bottom: 130px;
  max-width: 1220px;
}

.hero-v2 h1 {
  max-width: 820px;
  margin-bottom: 22px;
  line-height: 1.02;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.hero-v2 .hero-subtitle {
  max-width: 600px;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* Ghost / glassmorphism secondary CTA */
.btn-ghost {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}

[data-theme="dark"] .btn-ghost {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
}

/* Primary CTA on v2 hero: bigger, richer, slightly glowing */
.hero-v2 .btn-hero-primary {
  padding: 17px 30px;
  min-height: 56px;
  font-size: 16px;
  box-shadow:
    0 18px 40px -12px rgba(168, 32, 26, .55),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.hero-v2 .btn-hero-primary:hover {
  box-shadow:
    0 22px 48px -12px rgba(168, 32, 26, .65),
    0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.hero-v2 .hero-actions {
  gap: 14px;
  margin-bottom: 56px;
}

/* Glass trust pillar row — SIA ACS / 24/7 / UK Wide / 17+ Years */
.hero-trust {
  list-style: none;
  margin: 0;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 820px;
  background: rgba(12, 15, 22, .42);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, .6),
    0 1px 0 0 rgba(255, 255, 255, .05) inset;
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.hero-trust li:last-child {
  border-right: 0;
}

.hero-trust li:hover {
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px);
  border-radius: 8px;
}

.hero-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, rgba(168, 32, 26, .55), rgba(142, 27, 21, .35));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
}

.hero-trust-icon svg {
  width: 20px;
  height: 20px;
}

.hero-trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.hero-trust-text strong {
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.hero-trust-text span {
  margin-top: 3px;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ken Burns — subtle, slow, only for users who don't prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-v2 .hero-media {
    animation: kenburns 28s var(--ease-out) both;
  }

  @keyframes kenburns {
    0% { transform: scale(1.06) translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(-1.2%, -0.6%, 0); }
  }
}

/* Responsive: tablet — stack trust pillars 2x2 */
@media (max-width: 980px) {
  .hero-v2 .hero-content {
    padding-top: 88px;
    padding-bottom: 96px;
  }

  .hero-v2 .hero-subtitle {
    font-size: 17px;
    max-width: 540px;
  }

  .hero-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
  }

  .hero-trust li:nth-child(2n) {
    border-right: 0;
  }

  .hero-trust li:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
}

/* Responsive: mobile — stack to single column, tighten spacing */
@media (max-width: 640px) {
  .hero-v2 .hero-content {
    padding-top: 72px;
    padding-bottom: 80px;
  }

  .hero-v2 h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .hero-v2 .hero-subtitle {
    margin-bottom: 28px;
    font-size: 16px;
  }

  .hero-v2 .hero-actions {
    margin-bottom: 40px;
    gap: 10px;
    width: 100%;
  }

  .hero-v2 .hero-actions .btn {
    flex: 1 1 100%;
  }

  .hero-trust {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 4px;
  }

  .hero-trust li {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 10px 12px;
  }

  .hero-trust li:last-child {
    border-bottom: 0;
  }

  .hero-trust-text strong {
    font-size: 14px;
  }

  .hero-trust-text span {
    font-size: 11.5px;
  }
}

/* ===================================================================
   37. Footer social row — injected by script.js into the footer's
       first column. Site-wide (every page).
   =================================================================== */
.footer-social {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social-label {
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.footer-social ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social li {
  display: inline-flex;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.footer-social a:hover {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
  text-decoration: none;
}

.footer-social a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.footer-social svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ===================================================================
   38. About-KBG section watermark — very faint KBG logo sitting
       behind the copy, anchored to the left so it never overlaps
       the team photo on the right.
   =================================================================== */
.section-about-kbg {
  position: relative;
  overflow: hidden;
}

.about-watermark {
  position: absolute;
  top: 50%;
  left: 8%;
  width: min(620px, 48vw);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .012;
  pointer-events: none;
  z-index: 0;
}

/* Light mode: logo is white so invert it to dark against the paper bg */
.about-watermark {
  filter: invert(1) grayscale(1);
}

/* Dark mode: keep it white and just stay low-opacity */
[data-theme="dark"] .about-watermark {
  filter: none;
  opacity: .018;
  mix-blend-mode: screen;
}

.section-about-kbg .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .about-watermark {
    left: 2%;
    width: min(460px, 72vw);
    opacity: .01;
  }
  [data-theme="dark"] .about-watermark {
    opacity: .015;
  }
}

@media (max-width: 640px) {
  .about-watermark {
    top: 8%;
    left: -4%;
    transform: none;
    width: 90vw;
    opacity: .009;
  }
  [data-theme="dark"] .about-watermark {
    opacity: .013;
  }
}

/* ===================================================================
   39. Accreditations strip — uniform logo grid. Every tile is the
       same size and aspect ratio regardless of the logo inside it,
       so mixed-format marks (square, wide banner, etc.) line up
       cleanly. Used on accreditations.html.
   =================================================================== */
.section-accr-strip {
  padding-top: 72px;
  padding-bottom: 96px;
}

.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

/* Force the intro paragraph to center within the centered heading
   layout (the default .section-heading rule aligns it left). */
.section-heading--center p:not(.eyebrow) {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.accr-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.accr-strip-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.accr-strip-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 17, 22, .015), rgba(14, 17, 22, 0) 40%);
  pointer-events: none;
}

.accr-strip-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 17, 22, .14);
  box-shadow: var(--shadow-3);
}

.accr-strip-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.98);
}

/* Dark mode: keep tiles pure white so logos with white backgrounds
   blend in seamlessly (no muddy grey halo). Adjust border and
   subtle inner shadow so tiles still read as cards. */
[data-theme="dark"] .accr-strip-tile {
  background: #fff;
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
}

[data-theme="dark"] .accr-strip-tile:hover {
  background: #fff;
  border-color: rgba(255, 255, 255, .22);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
}

[data-theme="dark"] .accr-strip-tile::before {
  display: none;
}

/* Tablet */
@media (max-width: 980px) {
  .section-accr-strip {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .accr-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .accr-strip-tile {
    padding: 20px 24px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .accr-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .accr-strip-tile {
    padding: 16px 18px;
  }
}

/* On the accreditations page the logo strip sits above the SVG
   badge grid — give it a little breathing room below. */
.accr-strip-grid + .accr-badge-grid {
  margin-top: 48px;
}

/* ===================================================================
   40. Blog — index grid + post layout
   =================================================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: rgba(14, 17, 22, .14);
}

.blog-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--soft);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 28px;
}

.blog-card-meta,
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.blog-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.blog-card-dot {
  opacity: .5;
}

.blog-card-body h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.blog-card-body h3 a {
  color: inherit;
}

.blog-card-body h3 a:hover {
  color: var(--brand);
  text-decoration: none;
}

.blog-card-body p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  flex: 1;
}

.blog-card .text-link {
  margin-top: auto;
}

/* Individual post layout */
.blog-post {
  max-width: 800px;
  margin: 0 auto;
}

.blog-post h2 {
  margin-top: 44px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.blog-post h2:first-of-type {
  margin-top: 32px;
}

.blog-post p,
.blog-post li {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.75;
}

.blog-post ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.blog-post ul li + li {
  margin-top: 8px;
}

.blog-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* Dark mode treatments */
[data-theme="dark"] .blog-card {
  background: var(--white);
  border-color: var(--line);
}

[data-theme="dark"] .blog-card-media {
  background: #0a0c11;
}

[data-theme="dark"] .blog-footer-nav {
  border-top-color: var(--line);
}

/* Tablet */
@media (max-width: 980px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .blog-post h2 {
    margin-top: 36px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .blog-card-body {
    padding: 20px 22px 22px;
  }

  .blog-card-body h3 {
    font-size: 18px;
  }

  .blog-post p,
  .blog-post li {
    font-size: 16px;
  }
}

/* ===================================================================
   41. About values — small chip row used inside the About KBG block
   =================================================================== */
.about-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 30px;
  padding: 0;
}

.about-values span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.2;
}

[data-theme="dark"] .about-values span {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .78);
}

/* ===================================================================
   42. Sector tiles — cleaner sector-use-case layout used on
       service pages (first: manned-guarding). Replaces the old
       pill-cloud layout with a proper icon + title + desc card row.
   =================================================================== */
.sector-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: 48px;
  align-items: start;
}

.sector-grid-wrap .section-heading {
  margin: 0;
  position: sticky;
  top: 110px;
}

.sector-grid-wrap .section-heading h2 {
  margin-bottom: 14px;
}

.sector-grid-wrap .section-heading p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.65;
}

.sector-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sector-tiles li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.sector-tiles li:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 17, 22, .14);
  box-shadow: var(--shadow-3);
}

.sector-tiles-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 14px -6px var(--brand-glow);
}

.sector-tiles-icon svg {
  width: 22px;
  height: 22px;
}

.sector-tiles li div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sector-tiles li strong {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.sector-tiles li span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Dark mode */
[data-theme="dark"] .sector-tiles li {
  background: var(--white);
  border-color: var(--line);
}

/* Tablet: heading stacks above tiles */
@media (max-width: 980px) {
  .sector-grid-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sector-grid-wrap .section-heading {
    position: static;
  }
}

/* Mobile: single column tiles */
@media (max-width: 640px) {
  .sector-tiles {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sector-tiles li {
    padding: 18px 20px;
  }
}

/* ===================================================================
   43. About KBG — make the team photo stretch to match the text
       column height, so the image never looks short next to the
       eyebrow + heading + two paragraphs + values + button.
   =================================================================== */
.section-about-kbg .split.align-start {
  align-items: stretch;
}

.section-about-kbg .intro-image {
  min-height: 100%;
  height: auto;
  align-self: stretch;
}

/* On tablet/mobile the split already collapses, give the image a
   sensible minimum so it reads as a visual, not a sliver. */
@media (max-width: 980px) {
  .section-about-kbg .intro-image {
    min-height: 360px;
  }
}

/* ===================================================================
   44. About KBG — crossfade slideshow replacing the static
       .intro-image. Same frame, same shadow, but photos rotate
       with a slow opacity transition.
   =================================================================== */
.intro-slideshow {
  position: relative;
  min-height: 460px;
  align-self: stretch;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  isolation: isolate;
}

.intro-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
  z-index: 3;
}

.intro-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 1.4s var(--ease-out),
    transform 6s var(--ease-out);
  z-index: 1;
}

/* Gentle dark overlay so any photo still reads as a premium framed
   visual, regardless of underlying tone. */
.intro-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 17, 22, .02), rgba(14, 17, 22, .22));
  pointer-events: none;
}

.intro-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Match the About KBG section's stretch-to-height logic */
.section-about-kbg .intro-slideshow {
  min-height: 100%;
}

@media (max-width: 980px) {
  .intro-slideshow {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .intro-slideshow {
    min-height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-slide {
    transition: none;
    transform: none;
  }
  .intro-slide.is-active {
    transform: none;
  }
}

/* ===================================================================
   45. Intro slideshow — dot indicators overlaid on the bottom
       of the photo frame. Brand red when active, translucent
       white when idle, click to jump.
   =================================================================== */
.intro-slides {
  position: absolute;
  inset: 0;
}

.intro-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  pointer-events: none;
}

.intro-dot {
  pointer-events: auto;
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, .38);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.intro-dot:hover {
  background: rgba(255, 255, 255, .7);
  border-color: #fff;
  transform: scale(1.15);
}

.intro-dot.is-active {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(168, 32, 26, .28);
  transform: scale(1.15);
}

.intro-dot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ===================================================================
   46. FAQ section — accordion style used on home, service, and
       info pages. Progressive enhancement via <details>/<summary>
       so it still works without JS.
   =================================================================== */
.section-faq {
  padding-top: 80px;
  padding-bottom: 96px;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: 48px;
  align-items: start;
}

.faq-layout .section-heading {
  margin: 0;
  position: sticky;
  top: 110px;
}

.faq-layout .section-heading h2 {
  margin-bottom: 14px;
}

.faq-layout .section-heading p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.65;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.faq-item[open] {
  border-color: rgba(14, 17, 22, .14);
  box-shadow: var(--shadow-2);
}

.faq-item > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 60px 20px 24px;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}

.faq-item > summary::-webkit-details-marker,
.faq-item > summary::marker {
  display: none;
  content: "";
}

.faq-item > summary:hover {
  color: var(--brand);
}

.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--soft);
  transition: background var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}

.faq-item > summary::before {
  content: "";
  position: absolute;
  right: 33px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='currentColor' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='currentColor' stroke-width='2.4' stroke-linecap='round'/></svg>") center / contain no-repeat;
  color: var(--ink-2);
  transition: transform var(--t-base) var(--ease), color var(--t-fast) var(--ease);
  z-index: 1;
}

.faq-item[open] > summary::before {
  transform: translateY(-50%) rotate(45deg);
  color: #fff;
}

.faq-item[open] > summary::after {
  background: var(--brand);
}

.faq-item > summary:hover::after {
  background: var(--brand);
}

.faq-item > summary:hover::before {
  color: #fff;
}

.faq-answer {
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.faq-answer p {
  margin: 0 0 12px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: var(--brand);
  font-weight: 700;
}

/* Dark mode */
[data-theme="dark"] .faq-item {
  background: var(--white);
  border-color: var(--line);
}

[data-theme="dark"] .faq-item > summary {
  color: var(--ink);
}

[data-theme="dark"] .faq-item > summary::after {
  background: var(--soft);
}

[data-theme="dark"] .faq-answer {
  color: var(--ink-2);
}

/* Tablet: heading stacks above list */
@media (max-width: 980px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .faq-layout .section-heading {
    position: static;
  }

  .section-faq {
    padding-top: 64px;
    padding-bottom: 72px;
  }
}

@media (max-width: 640px) {
  .faq-item > summary {
    padding: 16px 56px 16px 18px;
    font-size: 15px;
  }

  .faq-item > summary::after {
    right: 16px;
    width: 28px;
    height: 28px;
  }

  .faq-item > summary::before {
    right: 23px;
    width: 12px;
    height: 12px;
  }

  .faq-answer {
    padding: 0 18px 18px;
    font-size: 14.5px;
  }
}

/* ===================================================================
   47. Clickable accreditation tile — used for the SIA ACS tile
       which links to the SIA public register. Keeps the same
       uniform size/frame as the neutral tiles.
   =================================================================== */
.accr-strip-tile--link {
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.accr-strip-tile--link:hover {
  border-color: var(--brand);
}

.accr-strip-tile--link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.accr-strip-tile-verify {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  background: rgba(168, 32, 26, .92);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  pointer-events: none;
}

.accr-strip-tile--link:hover .accr-strip-tile-verify,
.accr-strip-tile--link:focus-visible .accr-strip-tile-verify {
  opacity: 1;
  transform: translateY(0);
}

/* Dark mode: keep verify pill readable on the light tile */
[data-theme="dark"] .accr-strip-tile--link:hover {
  border-color: var(--brand);
}

/* Homepage accreditations strip section spacing */
.section-acs-strip {
  padding-top: 64px;
  padding-bottom: 96px;
}