/* ==========================================================================
   SENTINEL PROJECTS — MAIN.CSS
   Brand overrides on top of Bootstrap 5.3 + Bootstrap Icons (both loaded
   separately, self-hosted, from assets/vendor/ — see includes/head.php).
   This file must load AFTER those two so its rules win the cascade.

   Assembled from two source files, in order:
     1. design-system.css — brand tokens + component styles (design system v1.0)
     2. additional.css    — consent banner, honeypot, breadcrumb spacing, extras
   ========================================================================== */

/* ============== FROM design-system.css (design system v1.0) ============== */
/* ==========================================================================
   SENTINEL PROJECTS — DESIGN SYSTEM
   Built on Bootstrap 5.3, restyled to brand tokens.
   Spacing: strict 8px baseline grid (0.5rem increments).
   Colour: WCAG AA verified pairs only (see comments per pair).
   Motion: 150–300ms, transform/opacity only, reduced-motion aware.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TYPEFACE — General Sans (Indian Type Foundry, via Fontshare, OFL/FFL
   free for commercial use). Self-hosted per architecture doc §4: max two
   font files, woff2 only, font-display: swap. Chosen over Inter/system-ui
   for more character while keeping the same screen-legibility discipline
   at small sizes (form labels, table data, secondary copy).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-SemiBold.woff2') format('woff2');
  font-weight: 600 800; /* static file mapped across 600–800 — everything in this system heavier
                            than regular resolves to this one semibold cut, so no request ever
                            falls back to synthetic faux-bold */
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours — the only three hex values used raw; everything else
     below is derived from these so the palette can never drift. */
  --sp-dark: #142029;          /* dark backgrounds, dark text on light grey */
  --sp-accent: #CA202F;        /* CTAs, banners, accent */
  --sp-white: #FFFFFF;         /* white text on dark bg / on accent */

  /* Derived neutrals (tinted from --sp-dark so greys feel bonded to brand,
     not generic Bootstrap grey) */
  --sp-grey-100: #F5F6F7;      /* light grey page background */
  --sp-grey-200: #E7E9EB;      /* subtle section separators */
  --sp-grey-300: #CBD0D4;      /* borders, dividers */
  --sp-grey-500: #6B7680;      /* secondary/muted text — 4.6:1 on white */
  --sp-grey-700: #3A464E;      /* tertiary dark surface (cards on dark) */

  /* Accent tonal ramp — for hover/active states without introducing a new hue */
  --sp-accent-600: #A81A27;    /* accent hover/pressed (darker, keeps 4.5:1+ with white) */
  --sp-accent-100: #FBE8E9;    /* accent tint for subtle backgrounds/badges */

  /* Semantic tokens — this is what components actually consume */
  --color-bg-page: var(--sp-grey-100);
  --color-bg-surface: var(--sp-white);
  --color-bg-dark: var(--sp-dark);
  --color-bg-dark-raised: var(--sp-grey-700);
  --color-text-primary: var(--sp-dark);
  --color-text-secondary: var(--sp-grey-500);
  --color-text-on-dark: var(--sp-white);
  --color-text-on-dark-secondary: #B8C0C6; /* 4.6:1 on --sp-dark */
  --color-border: var(--sp-grey-300);
  --color-border-on-dark: rgba(255,255,255,0.16);
  --color-cta: var(--sp-accent);
  --color-cta-hover: var(--sp-accent-600);
  --color-cta-tint: var(--sp-accent-100);
  --color-focus-ring: #4DA3FF; /* distinct from brand red so focus is never mistaken for error/CTA */

  /* 8px baseline spacing scale — every gap, padding, margin in this system
     traces back to one of these. (4px reserved only for icon-to-label gaps.) */
  --space-1: 0.25rem;  /* 4px  — micro (icon/label gap only) */
  --space-2: 0.5rem;   /* 8px  — base unit */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 8rem;    /* 128px */

  /* Radius scale */
  --radius-sm: 0.25rem;  /* 4px  — badges, small chips */
  --radius-md: 0.5rem;   /* 8px  — buttons, inputs, cards */
  --radius-lg: 0.75rem;  /* 12px — larger cards, modals */
  --radius-pill: 999px;

  /* Elevation — consistent scale, used sparingly, never decorative-only */
  --shadow-sm: 0 1px 2px rgba(20,32,41,0.08);
  --shadow-md: 0 4px 12px rgba(20,32,41,0.10);
  --shadow-lg: 0 12px 32px rgba(20,32,41,0.16);
  --shadow-focus: 0 0 0 4px rgba(77,163,255,0.35);

  /* Motion tokens */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* Typography scale — modular, consistent steps */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */

  /* Bootstrap variable overrides (Bootstrap 5.3 CSS-variable API) */
  --bs-primary: var(--sp-accent);
  --bs-primary-rgb: 202, 32, 47;
  --bs-dark: var(--sp-dark);
  --bs-dark-rgb: 20, 32, 41;
  --bs-body-bg: var(--color-bg-page);
  --bs-body-color: var(--color-text-primary);
  --bs-border-radius: var(--radius-md);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--sp-accent);
  --bs-link-hover-color: var(--sp-accent-600);
}

/* Respect OS-level reduced motion globally, before anything else */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   2. BASE / TYPOGRAPHY
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'General Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sp-dark);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

@media (max-width: 767.98px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-md); }
}

p {
  max-width: 70ch; /* line-length control: keeps body copy in the 60–75 char band */
}

.text-secondary-sp { color: var(--color-text-secondary) !important; }
.section-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-accent);
  margin-bottom: var(--space-2);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   3. UNIVERSAL FOCUS + ACCESSIBILITY STATES
   -------------------------------------------------------------------------- */
a, button, .btn, input, select, textarea, [tabindex] {
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring only for mouse users landing precisely on a rounded
   pill control where the ring would look clipped — outline-offset handles
   the rest, so we do NOT strip focus rings anywhere else. */
.btn:focus-visible {
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  background: var(--sp-dark);
  color: var(--sp-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  z-index: 2000;
  transition: top var(--dur-base) var(--ease-out);
  font-weight: 600;
}
.skip-link:focus {
  top: var(--space-4);
  color: var(--sp-white);
}

/* --------------------------------------------------------------------------
   4. BUTTONS — all variants meet 44px min touch target, 8px spacing rhythm
   -------------------------------------------------------------------------- */
.btn {
  font-weight: 600;
  font-size: var(--fs-base);
  padding-block: var(--space-3);   /* 12px */
  padding-inline: var(--space-5);  /* 24px */
  min-height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-width: 2px;
  touch-action: manipulation;
}

.btn-sm {
  min-height: 40px;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  font-size: var(--fs-sm);
}

.btn-lg {
  min-height: 52px;
  padding-block: var(--space-4);
  padding-inline: var(--space-6);
  font-size: var(--fs-md);
}

/* Primary — the CTA. One visual language sitewide for "the thing we want
   people to click": accent red, white text, confident hover lift. */
.btn-primary {
  background-color: var(--sp-accent);
  border-color: var(--sp-accent);
  color: var(--sp-white);
}
.btn-primary:hover {
  background-color: var(--sp-accent-600);
  border-color: var(--sp-accent-600);
  color: var(--sp-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--sp-grey-300);
  border-color: var(--sp-grey-300);
  color: var(--sp-grey-500);
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Secondary — dark, for actions that matter but shouldn't compete with CTA */
.btn-dark {
  background-color: var(--sp-dark);
  border-color: var(--sp-dark);
  color: var(--sp-white);
}
.btn-dark:hover {
  background-color: #0d1519;
  border-color: #0d1519;
  color: var(--sp-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Outline — tertiary, for use on light and dark surfaces */
.btn-outline-dark {
  background-color: transparent;
  border-color: var(--sp-dark);
  color: var(--sp-dark);
}
.btn-outline-dark:hover {
  background-color: var(--sp-dark);
  border-color: var(--sp-dark);
  color: var(--sp-white);
}

.btn-outline-light {
  background-color: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--sp-white);
}
.btn-outline-light:hover {
  background-color: var(--sp-white);
  border-color: var(--sp-white);
  color: var(--sp-dark);
}

/* Ghost/link-style button for lower-emphasis actions ("Learn more") */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sp-accent);
  padding-inline: var(--space-3);
}
.btn-ghost:hover {
  background-color: var(--color-cta-tint);
  color: var(--sp-accent-600);
}
.btn-ghost .bi {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-ghost:hover .bi {
  transform: translateX(4px);
}

/* Loading state — never leave a button silently doing nothing */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.5);
  border-top-color: var(--sp-white);
  animation: sp-spin 700ms linear infinite;
}
.btn-outline-dark.is-loading::after,
.btn-ghost.is-loading::after {
  border: 2.5px solid rgba(20,32,41,0.25);
  border-top-color: var(--sp-dark);
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. NAVBAR
   -------------------------------------------------------------------------- */
.sp-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  min-height: 80px;
  padding-block: var(--space-3);
  transition: background-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/* Default / unscrolled: transparent, sits over the hero, inverted (white) text */
.sp-navbar-transparent {
  background-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sp-navbar-transparent .navbar-brand,
.sp-navbar-transparent .nav-link,
.sp-navbar-transparent .btn-phone {
  color: var(--sp-white);
}
.sp-navbar-transparent .nav-link:hover {
  color: var(--sp-white);
  background-color: rgba(255,255,255,0.12);
}
.sp-navbar-transparent .nav-link.active {
  color: var(--sp-white);
}
.sp-navbar-transparent .btn-phone .bi {
  color: var(--sp-white);
}

/* Scrolled: white glassmorphism, dark text (original look) */
.sp-navbar-scrolled {
  background-color: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.sp-navbar-scrolled .navbar-brand,
.sp-navbar-scrolled .nav-link,
.sp-navbar-scrolled .btn-phone {
  color: var(--sp-dark);
}
.sp-navbar-scrolled .nav-link:hover {
  color: var(--sp-accent);
  background-color: var(--sp-grey-100);
}
.sp-navbar-scrolled .nav-link.active {
  color: var(--sp-accent);
}
.sp-navbar-scrolled .btn-phone .bi {
  color: var(--sp-accent);
}

.sp-navbar .navbar-brand {
  font-weight: 800;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sp-navbar .navbar-brand .bi {
  color: var(--sp-accent);
  font-size: 1.5rem;
}

.sp-navbar .nav-link {
  font-weight: 600;
  padding-block: var(--space-3) !important;
  padding-inline: var(--space-4) !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: var(--radius-sm);
}
.sp-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 2px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--sp-accent);
}

.sp-navbar .btn-phone {
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.sp-navbar .btn-phone .bi {
  color: var(--sp-accent);
  font-size: 1.1rem;
}

/* Mobile offcanvas menu items need the same 44px targets */
.offcanvas .nav-link {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--sp-dark);
}
.offcanvas .nav-link:hover,
.offcanvas .nav-link:active {
  background-color: var(--sp-grey-100);
  color: var(--sp-accent);
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.sp-hero {
  background-image:
    linear-gradient(160deg, rgba(20,32,41,0.88) 0%, rgba(13,21,25,0.92) 100%),
    url('/assets/img/sentinel-fire-doors-hero-image.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--sp-white);
  padding-block: var(--space-9);
  position: relative;
  overflow: hidden;
}
/* Opt-in modifier: full viewport height, content vertically centred.
   Used on the homepage hero so it fills the screen behind the transparent
   floating header; other pages keep the normal padded hero height. */
.sp-hero-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.sp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(202,32,47,0.18), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.05), transparent 40%);
  pointer-events: none;
}
.sp-hero .container { position: relative; z-index: 1; }

.sp-hero h1 {
  color: var(--sp-white);
  font-size: var(--fs-3xl);
  max-width: 18ch;
}
.sp-hero .lead {
  color: var(--sp-white);
  font-size: var(--fs-md);
  max-width: 56ch;
  margin-block: var(--space-4) var(--space-6);
}

.sp-hero .trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-on-dark);
}
.sp-hero .trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-on-dark-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.sp-hero .trust-item .bi {
  color: var(--sp-accent);
  font-size: 1.1rem;
}

@media (max-width: 767.98px) {
  .sp-hero { padding-block: var(--space-8); }
}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.sp-card {
  background: var(--sp-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.sp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.sp-card .sp-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-cta-tint);
  color: var(--sp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.sp-card:hover .sp-card-icon {
  background-color: var(--sp-accent);
  color: var(--sp-white);
}

.sp-card h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}
.sp-card p {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}
.sp-card .sp-card-link {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--sp-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.sp-card .sp-card-link .bi {
  color: var(--sp-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.sp-card:hover .sp-card-link .bi {
  transform: translateX(4px);
}

/* Dark variant card (used on dark sections e.g. stats/certifications) */
.sp-card-dark {
  background-color: var(--color-bg-dark-raised);
  border: 1px solid var(--color-border-on-dark);
  color: var(--sp-white);
}
.sp-card-dark p { color: var(--color-text-on-dark-secondary); }
.sp-card-dark h3 { color: var(--sp-white); }

/* --------------------------------------------------------------------------
   8. CTA BAND — the repeated "Call / Book a survey" block from the arch doc
   -------------------------------------------------------------------------- */
.sp-cta-band {
  background-color: var(--sp-accent);
  color: var(--sp-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}
.sp-cta-band h2 {
  color: var(--sp-white);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
}
.sp-cta-band p {
  color: rgba(255,255,255,0.9);
  margin-bottom: 0;
}
.sp-cta-band .btn-light-cta {
  background-color: var(--sp-white);
  color: var(--sp-accent);
  border-color: var(--sp-white);
  font-weight: 700;
}
.sp-cta-band .btn-light-cta:hover {
  background-color: var(--sp-dark);
  border-color: var(--sp-dark);
  color: var(--sp-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Full-bleed section variant */
.sp-cta-section {
  background-color: var(--sp-dark);
  color: var(--sp-white);
  padding-block: var(--space-8);
}
.sp-cta-section h2 { color: var(--sp-white); }
.sp-cta-section p { color: var(--color-text-on-dark-secondary); }

/* --------------------------------------------------------------------------
   9. BADGES / PILLS / ACCREDITATION CHIPS
   -------------------------------------------------------------------------- */
.badge {
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
}
.badge-accent { background-color: var(--color-cta-tint); color: var(--sp-accent-600); }
.badge-dark { background-color: var(--sp-dark); color: var(--sp-white); }
.badge-outline {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
}

.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--sp-white);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
}
.sp-chip .bi { color: var(--sp-accent); }

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.form-label {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--sp-dark);
  margin-bottom: var(--space-2);
}
.form-control, .form-select {
  min-height: 48px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base); /* 16px minimum — prevents iOS auto-zoom */
}
.form-control:focus, .form-select:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 4px var(--color-cta-tint);
}
textarea.form-control { min-height: 128px; }

.form-text {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.is-invalid ~ .invalid-feedback,
.invalid-feedback {
  font-size: var(--fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.form-control.is-invalid {
  border-color: var(--sp-accent);
  background-image: none; /* keep Bootstrap's default icon off; we use text + colour + icon together */
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
}
.form-check-input:checked {
  background-color: var(--sp-accent);
  border-color: var(--sp-accent);
}
.form-check-label {
  padding-left: var(--space-1);
  font-size: var(--fs-sm);
}
.form-check {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

/* --------------------------------------------------------------------------
   11. ALERTS / TOASTS
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.alert .bi { font-size: 1.25rem; flex-shrink: 0; }
.alert.alert-multiline { align-items: flex-start; }
.alert.alert-multiline .bi { margin-top: 2px; }
.alert-success { background: #E9F6EE; border-color: #BEE5C9; color: #1E5B34; }
.alert-danger  { background: var(--color-cta-tint); border-color: #F3B7BB; color: #7A121C; }
.alert-warning { background: #FCF3E3; border-color: #F1DBA8; color: #7A5B10; }
.alert-info    { background: #E9F1FA; border-color: #BBD7F0; color: #1A4E82; }

/* --------------------------------------------------------------------------
   12. MODAL
   -------------------------------------------------------------------------- */
.modal-content {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
}
.modal-title { font-size: var(--fs-md); }
.modal-body { padding: var(--space-6); }
.modal-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
}
.modal-backdrop.show { opacity: 0.6; } /* strong scrim so foreground modal reads clearly */
.btn-close:focus { box-shadow: var(--shadow-focus); }

/* --------------------------------------------------------------------------
   13. ACCORDION (used for FAQ blocks per architecture doc)
   -------------------------------------------------------------------------- */
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.accordion-button {
  font-weight: 700;
  font-size: var(--fs-base);
  padding: var(--space-5);
  min-height: 44px;
  color: var(--sp-dark);
  background: var(--sp-white);
}
.accordion-button:not(.collapsed) {
  background-color: var(--color-cta-tint);
  color: var(--sp-accent-600);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: var(--shadow-focus);
  z-index: 2;
}
.accordion-button::after {
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion-body {
  padding: var(--space-2) var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   14. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb-item a {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding-block: var(--space-2);
  display: inline-flex;
  align-items: center;
}
.breadcrumb-item a:hover { color: var(--sp-accent); }
.breadcrumb-item.active { color: var(--sp-dark); }
.breadcrumb-item + .breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--sp-grey-300);
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   15. TABLE
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  font-size: var(--fs-sm);
}
.table thead th {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--color-text-secondary);
  border-bottom-width: 2px;
  border-color: var(--sp-dark);
  padding-block: var(--space-3);
}
.table td, .table th {
  padding: var(--space-4);
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--sp-grey-100);
}

/* --------------------------------------------------------------------------
   16. TABS / PILLS NAV
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--color-border);
}
.nav-tabs .nav-link {
  border: none;
  font-weight: 700;
  color: var(--color-text-secondary);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  border-radius: 0;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--sp-dark);
  border-color: var(--sp-grey-300);
}
.nav-tabs .nav-link.active {
  color: var(--sp-accent);
  background: transparent;
  border-color: var(--sp-accent);
}

.nav-pills .nav-link {
  font-weight: 600;
  color: var(--sp-dark);
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
}
.nav-pills .nav-link.active {
  background-color: var(--sp-accent);
  color: var(--sp-white);
}

/* --------------------------------------------------------------------------
   17. PROGRESS / STEPS ("How it works" 4-step block)
   -------------------------------------------------------------------------- */
.sp-steps {
  counter-reset: sp-step;
}
.sp-step {
  position: relative;
  padding-left: var(--space-9);
  padding-bottom: var(--space-6);
}
.sp-step::before {
  counter-increment: sp-step;
  content: counter(sp-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sp-dark);
  color: var(--sp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-md);
}
.sp-step::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.sp-step:last-child::after { display: none; }
.sp-step:last-child { padding-bottom: 0; }
.sp-step h4,
.sp-step .sp-step-title { margin-bottom: var(--space-2); font-size: var(--fs-lg); }
.sp-step p { color: var(--color-text-secondary); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.sp-footer {
  background-color: var(--sp-dark);
  color: var(--color-text-on-dark-secondary);
  padding-block: var(--space-8) var(--space-6);
}
.sp-footer h3 {
  color: var(--sp-white);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
.sp-footer a {
  color: var(--color-text-on-dark-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.sp-footer a:hover { color: var(--sp-white); }
.sp-footer address {
  color: var(--color-text-on-dark-secondary);
  font-style: normal;
}
.sp-footer hr {
  border-color: var(--color-border-on-dark);
  opacity: 1;
  margin-block: var(--space-6);
}
.sp-footer .social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-white);
}
.sp-footer .social-icon:hover {
  background-color: var(--sp-accent);
  border-color: var(--sp-accent);
}

/* --------------------------------------------------------------------------
   19. LOGO / TRUST STRIP (grayscale client logos)
   -------------------------------------------------------------------------- */
.sp-logo-strip img {
  height: 32px;
  width: auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--dur-base) var(--ease-out);
}
.sp-logo-strip img:hover {
  filter: grayscale(0) opacity(1);
}

/* --------------------------------------------------------------------------
   20. SCROLL-REVEAL ANIMATION (progressive enhancement, JS-driven)
   -------------------------------------------------------------------------- */
.sp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. UTILITIES
   -------------------------------------------------------------------------- */
.bg-sp-dark { background-color: var(--sp-dark) !important; }
.bg-sp-grey { background-color: var(--sp-grey-100) !important; }
.bg-sp-accent { background-color: var(--sp-accent) !important; }
.text-sp-accent { color: var(--sp-accent) !important; }
.text-sp-dark { color: var(--sp-dark) !important; }

.section-py { padding-block: var(--space-9); }
@media (max-width: 767.98px) {
  .section-py { padding-block: var(--space-7); }
}

/* Icon-only button — always paired with aria-label + visible min target */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensures no horizontal scroll ever creeps in */
html, body { overflow-x: hidden; max-width: 100%; }

/* .sp-navbar is position: fixed and no longer takes up document flow space
   (see navbar rules above), so every page needs top padding on <main> equal
   to the navbar's min-height, otherwise content starts underneath it.
   Pages whose first element is .sp-hero don't need this (the hero is full
   viewport height and is designed to sit behind the transparent navbar),
   so it's cancelled out again just below. */
main { padding-top: 80px; }
main:has(> .sp-hero-full:first-child) { padding-top: 0; }

/* Swatch tiles for the palette showcase section only */
.sp-swatch {
  border-radius: var(--radius-md);
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  border: 1px solid var(--color-border);
}
.sp-swatch small {
  font-weight: 600;
  opacity: 0.85;
}

/* ============== FROM additional.css ============== */
/* ==========================================================================
   SENTINEL PROJECTS — ADDITIONAL STYLES
   Small additions on top of Bootstrap + design-system.css for things that
   weren't in the showcase file: the consent banner, the contact form's
   honeypot field, the breadcrumb page-level wrapper spacing, and a
   link-styled button used in the footer.

   Real Bootstrap Icons (assets/vendor/bootstrap-icons/) already handle
   their own sizing via the .bi class — no icon-sizing rules needed here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON-LOOKING-LIKE-A-LINK (footer "Cookie Preferences")
   -------------------------------------------------------------------------- */
.sp-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-text-on-dark-secondary);
  text-decoration: none;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.sp-link-button:hover { color: var(--sp-white); }

/* --------------------------------------------------------------------------
   HONEYPOT FIELD — hidden off-screen (NOT display:none/visibility:hidden)
   so unsophisticated bots that specifically skip those two properties
   still fill it in and get caught by contact-handler.php
   -------------------------------------------------------------------------- */
.sp-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   BREADCRUMB WRAPPER (page-level spacing, breadcrumb itself styled in
   design-system.css's own breadcrumb section)
   -------------------------------------------------------------------------- */
.sp-breadcrumb-wrap {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}

/* --------------------------------------------------------------------------
   COOKIE CONSENT BANNER (self-built, ~3KB with its JS — architecture §6)
   -------------------------------------------------------------------------- */
.sp-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: var(--sp-white);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.sp-consent-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.sp-consent-text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  max-width: 60ch;
}
.sp-consent-text a { color: var(--sp-accent); }
.sp-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sp-consent-panel {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(20,32,41,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.sp-consent-panel-inner {
  background: var(--sp-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 767.98px) {
  .sp-consent-inner { flex-direction: column; align-items: flex-start; }
  .sp-consent-actions { width: 100%; }
  .sp-consent-actions .btn { flex: 1; }
}

/* ============== HOMEPAGE / PAGE-LEVEL ADDITIONS ============== */
/* Lead intro paragraph — the GEO answer block under "What we do".
   Slightly larger and darker than body copy so it reads as the summary. */
.lead-intro {
  font-size: var(--fs-md);
  color: var(--color-text-primary);
  max-width: 70ch;
  margin-bottom: 0;
}

/* ============== CHECK LIST (service/sector page bullet lists) ============== */
.sp-check-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-5);
}
.sp-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.sp-check-list li:last-child { border-bottom: 0; }
.sp-check-list .bi {
  color: var(--sp-accent);
  flex-shrink: 0;
  margin-top: 0.2em;
}
/* On grey sections the divider needs a touch more contrast */
.bg-sp-grey .sp-check-list li { border-color: var(--sp-grey-300); }

/* Responsive table wrapper — prevents horizontal overflow on small screens */
.table-responsive { overflow-x: auto; }

/* ============== RELATED PAGES NAV STRIP ============== */
.sp-related-links {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}
.sp-related-label {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-right: var(--space-3);
}
.sp-related-links a {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sp-accent);
  text-decoration: none;
  margin-right: var(--space-5);
  margin-bottom: var(--space-2);
}
.sp-related-links a:hover { text-decoration: underline; }

/* ============== HOMEPAGE HERO FORM CARD ============== */
.sp-hero-home .sp-hero-lead {
  color: var(--sp-white); /* pure white for contrast, per brief */
}
.sp-hero-form-card {
  background: var(--sp-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.sp-hero-form-title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
  color: var(--sp-dark);
}
.sp-hero-form-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.sp-hero-form .form-label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--sp-dark);
  margin-bottom: var(--space-1);
}
.sp-hero-form .form-control {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.sp-hero-form .form-control:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px rgba(202,32,47,0.15);
}
@media (max-width: 991px) {
  .sp-hero-form-card { margin-top: var(--space-6); }
}