: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: dot markers instead of numbers */
.tech-list li { grid-template-columns: 1.5rem 1fr; }
.tech-dot {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--gold, oklch(65% .15 75));
  margin-top: .5rem;
  flex-shrink: 0;
}

/* Compact on mobile only (desktop/tablet unchanged) */
@media (max-width: 575px) {
  .tech-list { margin-top: 1.75rem; }
  .tech-list li {
    grid-template-columns: 1rem 1fr;
    gap: .625rem;
    padding-top: .875rem;
    padding-bottom: .875rem;
  }
  .tech-dot { width: .5rem; height: .5rem; margin-top: .4rem; }
  .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; }
}
/* ---- Compact enquiry form ---- */
#enquiry-form { align-self: start !important; padding: 20px 24px !important; max-width: 560px; justify-self: end; width: 100%; }
#enquiry-form h3 { font-size: 20px !important; line-height: 1.3 !important; }
#enquiry-form > div { margin-top: 14px !important; gap: 12px 16px !important; align-content: start !important; grid-auto-rows: min-content !important; }
#enquiry-form label { font-size: 13px !important; display: block; }
#enquiry-form .form-control { margin-top: 4px !important; padding: 8px 12px !important; font-size: 15px !important; line-height: 1.4 !important; height: auto !important; min-height: 0 !important; }
#enquiry-form textarea.form-control { height: 84px !important; resize: vertical; }
#enquiry-form [hidden] { display: none !important; }
#enquiry-form .field-error { margin-top: 4px !important; font-size: 13px !important; }
#enquiry-form button[type="submit"] { margin-top: 16px !important; padding: 10px 24px !important; font-size: 15px !important; }

/* ---- Contact: left column matches form height (fonts unchanged, spacing tightened) ---- */
@media (min-width: 1024px) {
  #contact .container-x { align-items: stretch !important; }
  #contact .container-x > div:first-child { display: flex; flex-direction: column; justify-content: space-between; }
  #contact .container-x > div:first-child h2 { margin-top: 10px !important; margin-bottom: 0 !important; line-height: 1.1 !important; }
  #contact .container-x > div:first-child .max-w-2xl p.leading-relaxed { margin-top: 10px !important; line-height: 1.55 !important; }
  #contact .container-x > div:first-child ul { margin-top: 12px !important; }
  #contact .container-x > div:first-child ul > li + li { margin-top: 12px !important; }
}
/* ---- Mobile: smaller phone / email text in Contact ---- */
@media (max-width: 767px) {
  #contact ul a { font-size: 15px !important; line-height: 1.5 !important; }
  #contact ul p { font-size: 11px !important; }
}

/* ---- Mobile: tighter footer (gap around logo) ---- */
@media (max-width: 767px) {
  footer > .container-x { padding-top: 28px !important; padding-bottom: 24px !important; gap: 24px !important; }
  footer img { display: block !important; }
  footer .container-x > div:first-child > p { margin-top: 12px !important; }
}

/* ---- Services section: "?" stays on the same line as "SERVICES"; tighter heading-to-content gap ---- */
#services .max-w-2xl { max-width: none; }
#services .svc-title-line { white-space: nowrap; }
@media (max-width: 639px) {
  #services h2 { font-size: clamp(1.25rem, 6.6vw, 1.875rem) !important; }
}
#services .svc-grid { margin-top: 1.25rem !important; }
@media (min-width: 640px) {
  #services .svc-grid { margin-top: 1.75rem !important; }
}