:root { --header-surface: oklch(0.128 0 0 / 94%); }
html { scroll-padding-top: 7rem; }
body { margin: 0; line-height: 1.5; }
h1, h2, h3 { letter-spacing: 0; }
p, ul, ol, dl { margin-bottom: 0; }
ul, ol { padding-left: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; padding: 0; background: var(--header-surface); color: var(--foreground); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 96px; gap: 1rem; }
.primary-nav { flex-grow: 0; gap: 1.75rem; }
.primary-nav .nav-link { padding: 0; color: var(--muted-foreground); font-size: .875rem; font-weight: 500; }
.primary-nav .nav-link:hover { color: var(--gold); }
.btn-gold { --bs-btn-color: var(--primary-foreground); --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); --bs-btn-hover-color: var(--primary-foreground); --bs-btn-hover-bg: var(--gold); --bs-btn-hover-border-color: var(--gold); background: var(--gold); color: var(--primary-foreground); border-radius: .25rem; font-weight: 700; }
.call-link { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1rem; font-size: .875rem; }
.menu-toggle { padding: .5rem; color: var(--foreground); border: 0; border-radius: .25rem; }
.menu-toggle:focus { box-shadow: 0 0 0 2px var(--gold); }
.form-control { color: var(--foreground); background: var(--deep); border-color: var(--input); }
.form-control:focus { color: var(--foreground); background: var(--deep); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.field-error { margin-top: .375rem; font-size: .875rem; color: var(--destructive); }
#enquiry-status { margin-top: 1rem; font-size: .875rem; color: var(--muted-foreground); }
[hidden] { display: none !important; }
@media (max-width: 991px) {
  .header-inner { flex-wrap: wrap; }
  .primary-nav { flex-basis: 100%; padding-bottom: 1rem; }
  .primary-nav .nav-link { display: block; padding: .75rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; }
  .primary-nav .call-link { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Bolder section labels (About Us, Security Technology, etc.) */
.eyebrow {
  font-family: 'Archivo', 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
}
.eyebrow::before { height: 2px; width: 2.25rem; }

/* Dark-yellow labels on light backgrounds for proper contrast; dark sections keep default gold */
.bg-cream .eyebrow, .surface-light .eyebrow { color: oklch(50% .125 75); }
.bg-cream .eyebrow::before, .surface-light .eyebrow::before { background: oklch(50% .125 75); }

/* Larger header logo */
.header-logo { height: 76px; width: auto; object-fit: contain; }
.site-header .font-display { font-size: 1.375rem; }
@media (max-width: 991px) { .header-logo { height: 60px; } .header-inner { min-height: 80px; } }
@media (max-width: 480px) { .header-logo { height: 52px; } .site-header .font-display { font-size: 1.125rem; } }
/* Smarter Security Systems list: compact on mobile only (desktop/tablet unchanged) */
@media (max-width: 575px) {
  .tech-list { margin-top: 1.75rem; }
  .tech-list li {
    grid-template-columns: 1.75rem 1fr;
    gap: .75rem;
    padding-top: .875rem;
    padding-bottom: .875rem;
  }
  .tech-list li > span { font-size: .8125rem; }
  .tech-list li h3 { font-size: .9375rem; line-height: 1.3; }
  .tech-list li p { font-size: .8125rem; line-height: 1.5; margin-top: .25rem; }
}
/* ==========================================================================
   Hero golden particles — slow, flowing gold dots that rise through the hero.
   The markup (.hero-particles) and the generator in site.js were already in
   place; these are the styles that make them visible and animate them.
   Each <span> gets its own size, left position, horizontal drift (--dx),
   duration and delay from site.js, so no two dots move alike.
   ========================================================================== */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.hero-particles > span {
  position: absolute;
  top: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c2 0%, #ffd45a 35%, #e0a21c 70%, rgba(224, 162, 28, 0) 100%);
  box-shadow: 0 0 6px 1px rgba(255, 198, 64, .75), 0 0 14px 3px rgba(224, 162, 28, .35);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: hero-float;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes hero-float {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translate3d(calc(var(--dx, 0px) * .5), -55vh, 0); opacity: .55; }
  90%  { opacity: .85; }
  100% { transform: translate3d(var(--dx, 0px), -110vh, 0); opacity: 0; }
}
@supports (height: 1cqh) {
  @keyframes hero-float {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: .9; }
    50%  { transform: translate3d(calc(var(--dx, 0px) * .5), -55cqh, 0); opacity: .55; }
    90%  { opacity: .85; }
    100% { transform: translate3d(var(--dx, 0px), -108cqh, 0); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none; }
}

/* ==========================================================================
   Hero certification badge — dark glass plate, gold accent rule, gold
   certificate names. Sits above the headline.
   ========================================================================== */
.hero-cert {
  display: inline-flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 30rem;
  margin: 1.75rem 0 0;
  padding: .8rem 1.1rem .8rem .95rem;
  background: linear-gradient(90deg, oklch(12.8% 0 0 / .82), oklch(12.8% 0 0 / .55));
  border: 1px solid oklch(72% .155 75 / .35);
  border-left: 3px solid var(--gold, #e09a00);
  border-radius: .25rem;
  color: var(--foreground, #f4f1ea);
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: none;
}
.hero-cert-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .22rem; color: var(--gold, #e09a00); }
.hero-cert b { font-weight: 700; color: var(--gold, #e09a00); }
.hero-cert .nw { white-space: nowrap; }
@media (max-width: 575px) {
  .hero-cert { max-width: 100%; gap: .6rem; padding: .65rem .8rem; font-size: .75rem; line-height: 1.6; letter-spacing: .04em; }
  .hero-cert-icon { width: 1.1rem; height: 1.1rem; margin-top: .18rem; }
}