/* =========================================================================
   FlexiScan Security — Global stylesheet
   -------------------------------------------------------------------------
   Contents
     00. Self-hosted typefaces
     01. Design tokens
     02. Reset & base
     03. Layout shell (sidebar + main)
     04. Sidebar navigation
     05. Mobile top bar & drawer
     06. Buttons, badges, misc components
     07. Hero & page header
     08. Cards, grids, panels
     09. Photographs and galleries
     11. Forms & contact
     12. Tables, legal/prose pages, FAQ
     13. Footer
     14. Utilities
     15. Responsive breakpoints
     16. Forced-colours / high-contrast support
     17. Print
   ========================================================================= */

/* =========================================================================
   00. SELF-HOSTED TYPEFACES
   -------------------------------------------------------------------------
   Served from this site's own domain (assets/fonts/) rather than Google
   Fonts, so rendering this site contacts no third party at all — which the
   Cookie Policy states, and which also keeps the site fully usable offline
   and behind content blockers. Latin subsets only; the fallback stacks in
   the tokens below cover everything else. All three faces are licensed
   under the SIL Open Font License — see assets/fonts/LICENSE-*.txt.
   font-display: swap shows real text in the fallback face immediately.
   ========================================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}


/* =========================================================================
   01. DESIGN TOKENS
   ========================================================================= */
:root {
  /* Brand — sampled from the FlexiScan shield logo */
  --navy-950: #060c15;
  --navy-900: #0e1a2b;
  --navy-850: #122135;
  --navy-800: #16273d;
  --navy-700: #1f3550;
  --navy-600: #2a4468;

  --amber-400: #f5bc63;
  --amber-500: #f2a93b;
  --amber-600: #d98f1f;

  --green-500: #3fbe7a;
  --red-400:   #e88787;

  /* Surfaces */
  --surface-0:  #0b1729;   /* page background          */
  --surface-1:  #15243b;   /* raised card              */
  --surface-2:  #1c314a;   /* raised card, hover       */
  --surface-3:  #22394f;

  /* Text */
  --text:        #eaf0f6;
  --text-strong: #ffffff;
  --text-muted:  #9fb0c3;
  --text-dim:    #7c93ac;

  /* Lines */
  --line:        #26394f;
  --line-strong: #35506e;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  /* Metrics */
  --sidebar-w: 300px;
  --topbar-h: 72px;
  --container: 1080px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .38);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);

  /* Tell the browser this is a dark UI so form controls, scrollbars and
     the canvas match, instead of flashing white. */
  color-scheme: dark;
}


/* =========================================================================
   02. RESET & BASE
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed top bar at every width (the bar grows to
     84px from 1024px up, so a hard-coded 76px would tuck anchors under it). */
  scroll-padding-top: calc(var(--topbar-h) + 4px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: #eaf0f6;
  color: var(--text);
  background-color: #0b1729;
  background-color: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

a { color: #f2a93b; color: var(--amber-500); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Inside running text, colour alone is not enough to mark a link (WCAG 1.4.1). */
.prose a, .callout a, .notice a, p a { text-decoration: underline; text-underline-offset: .15em; }

ul, ol { margin: 0 0 1em; padding-left: 1.25rem; }
li { margin-bottom: .4em; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .55em;
  letter-spacing: -.012em;
  color: #ffffff;
  color: var(--text-strong);
}
h1 { font-size: clamp(1.85rem, 4.2vw, 2.65rem); }
h2 { font-size: clamp(1.4rem, 2.9vw, 1.95rem); }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

strong, b { color: var(--text-strong); font-weight: 600; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--amber-500); color: var(--navy-950); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--amber-500);
  color: var(--navy-950);
  padding: .7rem 1.1rem;
  font-weight: 600;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }


/* =========================================================================
   03. LAYOUT SHELL
   ========================================================================= */
.site-main {
  min-width: 0;                 /* stops long words forcing horizontal scroll */
  padding-top: var(--topbar-h); /* clears the fixed mobile bar */
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section { padding: 2.25rem 0; }
.section--tight { padding: 1.5rem 0; }
/* The page header's own bottom padding already separates the lede from what
   follows, so the first section does not need a second full gap on top. */
.page-header + .section { padding-top: 1.25rem; }
.section--band {
  background-color: #15243b;
  background-color: var(--surface-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--deep {
  background-color: #0e1a2b;
  background-color: var(--navy-900);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head { max-width: 62ch; margin-bottom: 1.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lede { color: var(--text-muted); font-size: 1.06rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #f2a93b;
  color: var(--amber-500);
  margin: 0 0 .85rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background-color: currentColor;
  display: inline-block;
  flex-shrink: 0;
}


/* =========================================================================
   04 + 05. NAVIGATION (native <details> drawer)
   -------------------------------------------------------------------------
   The markup is:

     .topbar                     <- spans the window: background and rule
       .topbar-inner             <- held to the content width, so the burger
         details.nav                lines up with the page beneath it
           summary.nav-toggle    <- the burger, drawn by CSS
           .nav-panel            <- fixed overlay, shown by the browser
             .nav-backdrop       <- covers the whole window regardless
             aside.sidebar       <- starts at the content column's edge
         a.topbar-brand          <- pushed to the right of the same column

   The browser opens and closes the <details>, so none of this depends on
   JavaScript. Nothing here uses `position: fixed` inside a transformed
   ancestor, and nothing changes the document's scroll state, both of which
   are ways a fixed header can end up mispositioned on mobile.
   ========================================================================= */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--topbar-h);
  z-index: 70;
  background-color: #0e1a2b;
  background-color: var(--navy-900);
  border-bottom: 1px solid var(--line);
}

/* Same width and gutter as .container, so the burger sits on the page's
   left margin and the brand on its right margin rather than both being
   pushed into the corners of a wide monitor. */
.topbar-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.nav { position: relative; flex-shrink: 0; }

/* ---- The burger ---- */
.nav-toggle {
  /* Remove the default disclosure triangle in every engine. */
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 42px;
  flex-shrink: 0;
  background-color: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-strong);
  cursor: pointer;
  /* Stops a stray double tap zooming the page, which would otherwise leave
     this fixed bar laid out against the wrong viewport. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }
.nav-toggle:hover { background-color: var(--navy-800); }

.nav-toggle .bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle .bars span {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  border-radius: 2px;
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 6px; }
.nav-toggle .bars span:nth-child(3) { top: 12px; }

/* Open state: the bars become a cross. No transition, because the panel is
   added and removed from the box tree by the browser rather than animated. */
.nav[open] > .nav-toggle .bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav[open] > .nav-toggle .bars span:nth-child(2) { opacity: 0; }
.nav[open] > .nav-toggle .bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---- The panel the browser reveals ---- */
/* Centred on the same column as .container: with both `left` and `right`
   set and the margins auto, the box is centred within the viewport, so the
   drawer's outer edge lands exactly where the page content's does. The
   backdrop is taken out of this box and pinned to the window instead, so
   the dimming still covers the whole screen. */
.nav-panel {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.nav-backdrop {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(6, 12, 21, .62);
  border: 0;
  cursor: pointer;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  max-width: 86vw;
  border-left: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  background-color: #0e1a2b;
  background-color: var(--navy-900);
  border-right: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: no-preference) {
  .nav[open] > .nav-panel > .sidebar { animation: navSlideIn .24s ease-out; }
  .nav[open] > .nav-panel > .nav-backdrop { animation: navFadeIn .24s ease-out; }
}
@keyframes navSlideIn { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes navFadeIn  { from { opacity: 0; } to { opacity: 1; } }

.sidebar-nav { padding: .9rem .75rem 1.5rem; flex: 1 1 auto; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar-nav li { margin: 0; }

.nav-group-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 1.1rem .5rem .3rem;
  margin: 0;
}
.sidebar-nav > ul > li:first-child > .nav-group-label { padding-top: .2rem; }

.nav-link {
  display: block;
  padding: .5rem .55rem;
  border-radius: var(--r-sm);
  color: #dce5ee;
  font-size: .93rem;
  font-weight: 500;
  border-left: 2px solid transparent;
}
.nav-link:hover {
  background-color: #16273d;
  background-color: var(--navy-800);
  color: var(--text-strong);
  text-decoration: none;
}
.nav-link[aria-current="page"] {
  background-color: #16273d;
  background-color: var(--navy-800);
  color: #f2a93b;
  color: var(--amber-500);
  border-left-color: #f2a93b;
  border-left-color: var(--amber-500);
  font-weight: 600;
}
.nav-sub { padding-left: .55rem; }
.nav-sub .nav-link {
  font-size: .875rem;
  font-weight: 400;
  color: #b9c8d8;
  padding-top: .38rem;
  padding-bottom: .38rem;
}

.topbar-brand {
  touch-action: manipulation;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  color: var(--text-strong);
}
.topbar-brand:hover { text-decoration: none; }
.topbar-brand img {
  width: 44px;
  height: 44px;          /* the logo is square, so both axes are fixed */
  flex-shrink: 0;
}
.topbar-brand .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  line-height: 1.1;
  display: block;
  color: var(--text-strong);
}
.topbar-brand .brand-tag {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #f2a93b;
  color: var(--amber-500);
  display: block;
  margin-top: .18rem;
}

/* ---- Desktop navigation: the same groups, along the top bar ----
   Hidden below 1024px, where the burger drawer carries the menu. From
   1024px the burger is hidden instead and each named group becomes a
   native <details> dropdown — the browser owns open/closed exactly as it
   does for the drawer, so no JavaScript is required here either. site.js
   adds one-open-at-a-time, click-outside and Escape as conveniences. */
.topnav { display: none; }

@media (min-width: 1024px) {
  .nav { display: none; }   /* the burger and its drawer */

  .topnav {
    display: flex;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    margin-right: 1rem;
  }
  .topnav-link,
  .topnav-group > summary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border-radius: var(--r-sm);
    color: #dce5ee;
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .topnav-group > summary::-webkit-details-marker { display: none; }
  .topnav-group > summary::marker { content: ""; }
  .topnav-link:hover,
  .topnav-group > summary:hover {
    background-color: #16273d;
    background-color: var(--navy-800);
    color: var(--text-strong);
    text-decoration: none;
  }
  .topnav-link[aria-current="page"] {
    color: #f2a93b;
    color: var(--amber-500);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--amber-500);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
  }
  /* The group holding the current page carries the same underline, so the
     visitor can see where they are without opening anything. */
  .topnav-group--current > summary {
    box-shadow: inset 0 -2px 0 var(--amber-500);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
  }

  /* Chevron, drawn with borders so it follows currentColor everywhere,
     forced-colours mode included. */
  .topnav-group > summary::after {
    content: "";
    width: .42em;
    height: .42em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-25%);
    flex-shrink: 0;
  }
  .topnav-group[open] > summary { background-color: var(--navy-800); color: var(--text-strong); }
  .topnav-group[open] > summary::after { transform: rotate(225deg) translateY(-25%); }

  .topnav-group { position: relative; }
  .topnav-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 80;
    min-width: 250px;
    margin: 0;
    padding: .45rem;
    list-style: none;
    background-color: #0e1a2b;
    background-color: var(--navy-900);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
  }
  .topnav-menu li { margin: 0; }
  /* Items inside reuse .nav-link, so hover and aria-current styling match
     the drawer exactly. */
  .topnav-menu .nav-link { font-size: .92rem; }
}


/* =========================================================================
   06. BUTTONS, BADGES, MISC
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .94rem;
  line-height: 1.2;
  padding: .8rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

.btn-primary {
  background-color: #f2a93b;
  background-color: var(--amber-500);
  color: #0b1729;
  color: var(--navy-950);
  border-color: var(--amber-500);
}
.btn-primary:hover { background-color: var(--amber-400); border-color: var(--amber-400); }

.btn-ghost {
  background-color: transparent;
  color: var(--text-strong);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background-color: var(--navy-800); border-color: var(--amber-500); }

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 26px; height: 26px; }

/* An icon sitting directly inside a heading inherits display:block from the
   reset, which pushes the heading text onto its own line hard against the
   icon. Headings that carry an icon become flex rows instead, so the icon
   and the words share a baseline and a proper gap. */
h2:has(> .icon),
h3:has(> .icon),
h4:has(> .icon) {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Fallback for browsers without :has() — keeps the icon inline with a gap
   rather than block-stacked against the text. */
h2 > .icon,
h3 > .icon,
h4 > .icon {
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: .5rem;
}
h2:has(> .icon) > .icon,
h3:has(> .icon) > .icon,
h4:has(> .icon) > .icon { margin-right: 0; }


/* =========================================================================
   07. HERO & PAGE HEADER
   ========================================================================= */
.hero {
  background-color: #0e1a2b;
  background-color: var(--navy-900);
  border-bottom: 1px solid var(--line);
  padding: 2.25rem 0 2rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}
/* Home page lockup: the mark on the left, the tagline set directly to its
   right and left-aligned. Stacks on narrow phones so the tagline keeps a
   sensible measure. */
.hero-lockup {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.25rem;
  flex-wrap: wrap;
}
.hero-logo {
  width: 96px;
  height: 96px;           /* square: both axes fixed so it cannot stretch */
  flex-shrink: 0;
  display: block;
  margin: 0;
}
.hero-tagline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text-strong);
  text-align: left;
  min-width: 0;
  flex: 1 1 14rem;
}
.hero-tagline em { font-style: normal; color: #f2a93b; color: var(--amber-500); }

@media (min-width: 560px) {
  .hero-lockup { gap: 1.5rem; margin-bottom: 1.5rem; }
  .hero-logo { width: 128px; height: 128px; }
}
@media (min-width: 1024px) {
  .hero-logo { width: 156px; height: 156px; }
  .hero-tagline { font-size: 1.6rem; }
}
.hero h1 { margin-bottom: .5em; }
.hero h1 em {
  font-style: normal;
  color: #f2a93b;
  color: var(--amber-500);
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 58ch;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}
.hero-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem 1.5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}
.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  color: var(--text);
  margin: 0;
}
.hero-points .icon { color: var(--amber-500); margin-top: .15rem; }

.page-header {
  background-color: #0e1a2b;
  background-color: var(--navy-900);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0 1.5rem;
}
.page-header h1 { margin-bottom: .35em; }
.page-header .section-lede { font-size: 1.08rem; }

.breadcrumb {
  font-size: .82rem;
  color: var(--text-dim);
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  list-style: none;
  padding: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--amber-500); }
.breadcrumb [aria-current="page"] { color: var(--text); }


/* =========================================================================
   08. CARDS, GRIDS, PANELS
   ========================================================================= */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }

/* Grid items default to min-width:auto, which lets a wide child stretch the
   whole column past the viewport. Every grid here is allowed to shrink. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .hero-grid > * { min-width: 0; }

/* Grid variants used by the content in place of inline styles. */
.grid--top { align-items: start; }
.grid--gap-md { gap: 2rem; }
.grid--gap-lg { gap: 2.5rem; }

/* ---- Photographs lead on the narrowest screens -------------------------
   Above 560px .grid-2 is two columns and the picture sits beside the copy,
   which is where it belongs. Below that the grid stacks, and source order
   put the picture underneath a long run of prose — far enough down that on
   a phone it was effectively never seen (on the About page it began 1,853px
   into the document, with the first heading at 434px).

   Reordering the media column to the top is done here rather than by moving
   the markup, because the source order is the correct one for a screen
   reader and for the two-column layout: the heading should introduce the
   section, and a decorative photograph should not come between a reader and
   the text. `order` is purely visual and leaves the DOM sequence intact.

   :has() is doing the selecting so that content.py needs no new class on
   every image wrapper. Where it is unsupported the rule simply does not
   apply and the picture stays where it always was, which is the previous
   behaviour rather than a broken one. */
@media (max-width: 559.98px) {
  .grid-2 > *:has(> .photo) { order: -1; }

  /* With the picture on top, the grid gap becomes the space between the
     image and the heading that follows it, and it needs to read as a break
     between two things rather than as line spacing. */
  .grid-2:has(> * > .photo) { gap: 3rem; }
}

.card {
  background-color: #15243b;
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--text-muted); font-size: .95rem; }
.card p:last-of-type { margin-bottom: 0; }

a.card {
  color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
a.card:hover {
  text-decoration: none;
  border-color: var(--amber-600);
  background-color: var(--surface-2);
}
a.card h3 { color: var(--text-strong); }
a.card:hover h3 { color: var(--amber-500); }

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background-color: var(--navy-850);
  color: #f2a93b;
  color: var(--amber-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .95rem;
  flex-shrink: 0;
}

.card-more {
  margin-top: auto;
  padding-top: .9rem;
  font-size: .86rem;
  font-weight: 600;
  color: #f2a93b;
  color: var(--amber-500);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.panel {
  background-color: #15243b;
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
.panel--amber { border-color: var(--amber-600); }
.panel h3:first-child, .panel h2:first-child { margin-top: 0; }

.checklist { list-style: none; padding: 0; margin: 0 0 1em; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .55rem;
  font-size: .96rem;
}
.checklist .icon {
  color: #3fbe7a;
  color: var(--green-500);
  width: 18px;
  height: 18px;
  margin-top: .28rem;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background-color: #15243b;
  background-color: var(--surface-1);
  padding: 1.25rem 1rem;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #f2a93b;
  color: var(--amber-500);
  display: block;
  line-height: 1.1;
}
.stat-label {
  font-size: .8rem;
  color: var(--text-muted);
  display: block;
  margin-top: .35rem;
}

/* Numbered process steps */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li {
  position: relative;
  padding-left: 3.4rem;
  padding-bottom: 1.75rem;
  margin: 0;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--amber-600);
  background-color: var(--navy-850);
  color: #f2a93b;
  color: var(--amber-500);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 2.7rem;
  bottom: .35rem;
  width: 1px;
  background-color: var(--line);
}
.steps > li:last-child { padding-bottom: 0; }

/* The second column of a numbered sequence split across two lists: its first
   item continues the count at 5 rather than restarting at 1. */
.steps--from-5 { counter-reset: step 4; }

/* A single sequence split across two columns: the row gap plus the last
   item's padding otherwise leaves a visibly bigger space between the last
   item of column one and the first of column two once they stack on a phone. */
.steps-split { row-gap: 1.75rem; column-gap: 3rem; }

.steps h3 { margin-bottom: .3em; }
.steps p { color: var(--text-muted); font-size: .95rem; margin-bottom: 0; }

/* Callout */
.callout {
  border-left: 3px solid var(--amber-500);
  background-color: var(--navy-850);
  padding: 1.1rem 1.25rem;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 1.75rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--amber-400); }

/* ---- Photographs ----
   aspect-ratio is safe here because an <img> has intrinsic dimensions, so
   it never inflates the grid column. */
.photo {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: #122135;
  background-color: var(--navy-850);
  min-width: 0;
  max-width: 100%;
}
.photo picture { display: block; }

/* ---- A photograph the text flows around ----
   Used where a page opens with several sections of prose: the first sits
   beside the picture and the ones after it expand underneath, instead of
   leaving a tall empty column. Capping the prose's CHILDREN rather than the
   block keeps the line length readable both beside the picture and below it. */
.photo--float { margin-bottom: 1.75rem; }
@media (min-width: 900px) {
  /* Both .prose and .prose--figure are single classes, and .prose is declared
     later in this file, so the modifier needs the extra class to win. */
  .prose.prose--figure { max-width: none; }
  .prose--figure > :not(.photo) { max-width: 72ch; }
  .photo--float {
    float: right;
    width: 42%;
    margin: .3rem 0 1.5rem 2.5rem;
  }
}
/* Contain the float so the next section cannot ride up beside it. */
.prose--figure::after { content: ""; display: block; clear: both; }

/* A column of stacked blocks — a picture above a panel, say. */
.stack { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* =========================================================================
   09. GALLERIES
   -------------------------------------------------------------------------
   A captioned grid of photographs. Used on the alarms page to show the
   sounder finishes; sized so two sit side by side from 560px and the
   caption stays with its picture.
   ========================================================================= */
.gallery {
  list-style: none;
  margin: 1.75rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.gallery-item { margin: 0; min-width: 0; }
.gallery figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.gallery picture { display: block; }
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background-color: #122135;
  background-color: var(--navy-850);
}
.gallery figcaption {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}

@media (min-width: 560px) {
  .gallery--2 { grid-template-columns: repeat(2, 1fr); }
}
/* Four across from the desktop breakpoint. The ten finishes are ordered by
   cover colour, so four columns lands them as four black, four white and
   two red — the rows match how the range is actually grouped. */
@media (min-width: 1024px) {
  .gallery--2 { grid-template-columns: repeat(4, 1fr); }
}


/* =========================================================================
   11. FORMS & CONTACT
   ========================================================================= */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--text); }
.field .req { color: var(--amber-500); }
.field .hint { font-size: .78rem; color: var(--text-dim); font-weight: 400; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: .95rem;
  color: #eaf0f6;
  color: var(--text);
  background-color: #0b1729;
  background-color: var(--surface-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: .7rem .8rem;
  width: 100%;
  min-width: 0;
}
.field textarea { min-height: 220px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--amber-500);
  outline: 2px solid rgba(242, 169, 59, .35);
  outline-offset: 0;
}
.field select { appearance: none; background-image: none; }

/* Honeypot — hidden from people, visible to naive bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Prominent inline notice (used for the privacy warning on the contact form) */
.notice {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: #0b1729;
  background-color: var(--surface-0);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 1.25rem 0 0;
}
.notice > .icon { margin-top: .18rem; }
.notice p { font-size: .92rem; margin: 0; color: var(--text); }
.notice p + p { margin-top: .6rem; }
.notice--warn {
  border-color: var(--amber-600);
  border-left-width: 3px;
}
.notice--warn > .icon { color: #f2a93b; color: var(--amber-500); }

.field .hint { display: block; margin: 0; }

.form-status {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background-color: var(--navy-850);
  font-size: .9rem;
}
.form-status[hidden] { display: none; }
.form-status--ok { border-color: var(--green-500); }
.form-status--err { border-color: var(--red-400); color: var(--red-400); }

.field-error {
  font-size: .8rem;
  color: #e88787;
  color: var(--red-400);
}
.field-error[hidden] { display: none; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--red-400); }


/* =========================================================================
   12. PROSE / LEGAL / FAQ / TABLES
   ========================================================================= */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.75rem; padding-top: .25rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { color: var(--text-muted); }
.prose li { font-size: .97rem; }


/* Contents list on the longer legal documents */
.doc-toc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: #15243b;
  background-color: var(--surface-1);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.75rem;
}
.doc-toc-title {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 .75rem;
}
.doc-toc ol {
  margin: 0;
  padding-left: 1.35rem;
  columns: 1;
}
.doc-toc li { margin-bottom: .3rem; font-size: .93rem; }
.doc-toc a { color: #dce5ee; }
.doc-toc a:hover { color: var(--amber-500); }
@media (min-width: 720px) {
  .doc-toc ol { columns: 2; column-gap: 2.5rem; }
  .doc-toc li { break-inside: avoid; }
}

/* Legal sections get a little more separation and a scroll offset so a
   contents link does not land under the fixed top bar. */
.prose h2[id] {
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: 2rem;
}
.prose h2[id]:first-of-type { border-top: 0; padding-top: 0; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: #15243b;
  background-color: var(--surface-1);
  margin-bottom: .7rem;
  overflow: hidden;
}
.faq-item > summary {
  padding: 1rem 1.15rem;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--text-strong);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
/* Each question is a real <h2> (findable by heading navigation in a screen
   reader) restyled to look exactly like plain summary text. `font: inherit`
   picks up the summary's own family, weight and size in one go. */
.faq-item > summary > h2 {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--amber-500);
  flex-shrink: 0;
}
.faq-item[open] > summary::after { content: "\2013"; }
.faq-item > summary:hover { background-color: var(--surface-2); }
.faq-answer { padding: 0 1.15rem 1.15rem; color: var(--text-muted); font-size: .95rem; }
.faq-answer p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 460px;
}
th, td {
  text-align: left;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background-color: var(--navy-850);
}
td { color: var(--text-muted); }


/* =========================================================================
   13. FOOTER
   ========================================================================= */
.site-footer {
  background-color: #060c15;
  background-color: var(--navy-950);
  border-top: 1px solid var(--line);
  padding: 2rem 0 1.75rem;
}
.footer-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.footer-min img { width: 96px; height: 96px; }
.footer-min p { margin: 0; font-size: .87rem; color: var(--text-muted); }
.footer-min a { font-weight: 600; }
.footer-legal {
  list-style: none;
  margin: .25rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.25rem;
}
.footer-legal li { margin: 0; }
.footer-legal a { font-size: .87rem; font-weight: 500; color: #c4d1e0; }
.footer-legal a:hover { color: var(--amber-500); }


/* =========================================================================
   14. UTILITIES
   ========================================================================= */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-muted); }
.small { font-size: .87rem; }
.nowrap { white-space: nowrap; }
.container--narrow { max-width: 820px; }


/* =========================================================================
   15. RESPONSIVE
   ========================================================================= */
@media (min-width: 560px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .hero-points { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 800px) {
  .section { padding: 4.25rem 0; }
  .section--tight { padding: 2rem 0; }
  .hero { padding: 4.5rem 0 4rem; }
  .page-header { padding: 2.5rem 0 2rem; }
  .page-header + .section { padding-top: 1.75rem; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Wider screens ----
   From 1024px the burger drawer is replaced by the grouped top navigation
   (see the .topnav block in section 04/05); the rules here only make the
   content grids roomier. */
@media (min-width: 1024px) {
  /* Even columns and centred alignment so the hero photograph carries real
     weight against the copy rather than floating at the top of a tall gap. */
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  :root { --topbar-h: 84px; }
  .topbar-brand img { width: 58px; height: 58px; }
  .topbar-brand .brand-name { font-size: 1.5rem; }
}


/* =========================================================================
   16. FORCED COLOURS / HIGH CONTRAST
   -------------------------------------------------------------------------
   This block keeps the site usable when a browser or OS is overriding page
   colours. We stop fighting the browser and hand over to the system
   palette, but we restore the *structure* (borders, focus rings, the accent
   underline) that would otherwise vanish.
   ========================================================================= */
@media (forced-colors: active) {
  :root { color-scheme: light dark; }

  body { background-color: Canvas; color: CanvasText; }

  a { color: LinkText; text-decoration: underline; }
  a:visited { color: VisitedText; }

  .card,
  .panel,
  .photo,
  .doc-toc,
  .notice,
  .faq-item,
  .stat,
  .stat-row,
  .form-status,
  .card-icon,
  .sidebar,
  .topbar,
  .site-footer {
    background-color: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }

  .btn {
    border: 1px solid ButtonText;
    background-color: ButtonFace;
    color: ButtonText;
    forced-color-adjust: none;
  }
  .btn-primary { background-color: ButtonText; color: ButtonFace; }

  .nav-link { border-left-color: transparent; }
  .nav-link[aria-current="page"] {
    border-left: 3px solid CanvasText;
    background-color: Canvas;
    color: LinkText;
    font-weight: 700;
    text-decoration: underline;
  }
  .nav-toggle { border: 1px solid ButtonText; color: ButtonText; }
  .nav-toggle .bars span { background-color: ButtonText; }

  .topnav-link,
  .topnav-group > summary { color: CanvasText; }
  .topnav-menu { background-color: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .topnav-link[aria-current="page"],
  .topnav-group--current > summary {
    box-shadow: none;
    color: LinkText;
    text-decoration: underline;
    font-weight: 700;
  }

  .eyebrow, .card-more, .stat-num, .brand-tag { color: CanvasText; }
  .eyebrow::before { background-color: CanvasText; }

  .icon { stroke: CanvasText; }
  .checklist .icon { stroke: CanvasText; }

  .callout { border-left: 3px solid CanvasText; background-color: Canvas; }
  .hero, .page-header, .section--band, .section--deep { background-color: Canvas; border-color: CanvasText; }
  .hero h1 em { color: CanvasText; text-decoration: underline; }

  :focus-visible { outline: 3px solid Highlight; }
}

/* Windows high-contrast also reports prefers-contrast; nudge the borders up
   so the layout still reads as separate blocks on ordinary displays too. */
@media (prefers-contrast: more) {
  :root {
    --line: #52708f;
    --line-strong: #7c9cbd;
    --text-muted: #c3d1de;
    --text-dim: #a9bccd;
  }
}


/* =========================================================================
   17. PRINT
   ========================================================================= */
@media print {
  .sidebar, .topbar, .nav-backdrop, .site-footer, .hero-ctas,
  .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .site-main { margin-left: 0; padding-top: 0; }
  .card, .panel, .photo, .gallery img { border: 1px solid #999; background: #fff; }
  h1, h2, h3, h4, strong { color: #000; }
  p, li, td { color: #222; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}