/* ==========================================================================
   Florida GPS Monitoring — main.css
   Hand-coded. Mobile-first. WCAG 2.2 AA target.
   Staged 2026-10-03 — G2 template. Not deployed.

   SECTIONS
   1. Tokens
   2. Reset + base
   3. Typography
   4. Layout primitives
   5. Header / nav / language toggle
   6. Hero
   7. Content components (BLUF, lists, tables, figures)
   8. FAQ
   9. Disclaimer
   10. CTA band
   11. Footer
   12. Chat slot
   13. Utilities
   14. Motion + print

   SPECIFICITY RULE for this file: components are single-class selectors at
   0,1,0. Never chain a layout class with a component class to set spacing —
   spacing belongs to the component or to a .stack utility, never both.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* =========================================================================
     L2 RE-SKIN TOKENS — 2026-10-05 — spec: claude/FGM-L1-LOOK-PARITY-SPEC.md
     Her palette, measured from the live site (Elementor kit variables +
     computed styles). TWO BLUES, never merged: --navy is the overlay-band
     colour (#00365E, --e-global-color-af612df); --blue is the bright
     structural blue (announcement bar, PRODUCTS band, card titles).
     GREEN: her #339967 fails WCAG AA at body size (3.56:1 on white; we
     assert AA), so text/buttons use --green-action #297A52 (5.25:1 white,
     4.80:1 tint) with --green-action-hover #26734D; her exact #339967
     survives as --green-brand on NON-TEXT UI only (3.56/3.25 >= 3:1).
     Approved by Rahul 2026-10-05.
     ========================================================================= */
  --navy:        #00365E;
  --blue:        #1F4D96;
  --green-action:#297A52;
  --green-action-hover:#26734D;
  --green-brand: #339967;   /* non-text UI only — never text */

  --heading-ink: #20293B;
  --ink:         #354155;
  --ink-muted:   #47584F;
  --tint:        #F1F5FA;
  --faq-navy:    #11365E;
  --pill-grey:   #6A727D;
  --separator:   #D1D5DB;
  --border-card: #EDEDED;
  --border-faq:  #D5D8DC;
  --white:       #FFFFFF;

  /* legacy aliases — the pre-skin rules below keep working, remapped */
  --green-900: var(--heading-ink);
  --green-700: var(--green-action);
  --green-600: var(--green-action-hover);
  --green-400: var(--green-brand);
  --mist-50:  var(--tint);
  --mist-100: #E7EDF3;
  --mist-200: var(--separator);

  /* two-tone focus (see bottom layer): dark gold outer ring — 4.44:1 white,
     4.05:1 tint; white inner ring covers every dark surface we ship */
  --focus: #9C7007;

  /* Type — Roboto, her measured scale built from ratios off a 14.592px base
     (0.912rem): H3 1.25x, H2 1.5625x, H1 2.6042x = 38px, all weight 600 */
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --t-base: 0.912rem;
  --t-xs:   calc(var(--t-base) * 0.8125);
  --t-sm:   calc(var(--t-base) * 0.9375);
  --t-lg:   calc(var(--t-base) * 1.125);
  --t-xl:   calc(var(--t-base) * 1.25);      /* H3 = 18.24px */
  --t-2xl:  calc(var(--t-base) * 1.5625);    /* H2 = 22.8px  */
  --t-3xl:  calc(var(--t-base) * 2.0);
  --t-4xl:  calc(var(--t-base) * 2.6042);    /* H1 = 38px    */

  /* Space — 4px base (unchanged) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 3.5rem;
  --s-9: 5rem;

  --measure: 68ch;
  --wrap: 72rem;
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(17, 54, 94, 0.08);
  --shadow-md: 0 2px 10px rgba(17, 54, 94, 0.12);
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* sticky header clearance for #anchors */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Keyboard focus. Never removed — this site replaces an accessibility
   overlay, so native a11y has to be genuinely correct. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--green-900);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 120ms ease-out;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green-900);
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); font-weight: 600; letter-spacing: 0; }
h2 { font-size: var(--t-2xl); font-weight: 600; }
h3 { font-size: var(--t-xl);  font-weight: 600; }
h4 { font-size: var(--t-lg);  font-weight: 600; }

p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--s-4); }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-900); }

strong, b { font-weight: 600; }

/* Vertical rhythm. Owl selector so components never fight margins.
   This is the ONLY place block spacing is set inside prose. */
.prose > * + * { margin-top: var(--s-5); }
.prose > * + h2 { margin-top: var(--s-8); }
.prose > * + h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--green-600); }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 48rem) { .wrap { padding-inline: var(--s-6); } }

.section { padding-block: var(--s-8); }
@media (min-width: 48rem) { .section { padding-block: var(--s-9); } }

.section--tint { background: var(--mist-50); }
.section--dark { background: var(--green-900); color: var(--mist-100); }
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark a { color: var(--green-400); }

/* ==========================================================================
   5. HEADER / NAV / LANGUAGE TOGGLE
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--mist-200);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 4.25rem;
}

.site-header__logo { margin-right: auto; display: flex; align-items: center; }
.site-header__logo img { height: 44px; width: auto; }

/* Primary nav — off-canvas under 60rem, inline above */
.nav {
  position: fixed;
  inset: 4.25rem 0 auto 0;
  background: var(--white);
  border-bottom: 1px solid var(--mist-200);
  padding: var(--s-4) var(--s-4) var(--s-6);
  display: none;
  box-shadow: var(--shadow-md);
  max-height: calc(100dvh - 4.25rem);
  overflow-y: auto;
}
.nav[data-open="true"] { display: block; }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block;
  padding: var(--s-3) var(--s-2);
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--mist-100);
}
.nav__link:hover { color: var(--green-700); }
.nav__link[aria-current="page"] {
  color: var(--green-700);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--green-700);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 1px solid var(--mist-200);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--green-700); color: var(--green-700); }

@media (min-width: 60rem) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    display: block;
    padding: 0;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    background: none;
  }
  .nav__list { display: flex; align-items: center; gap: var(--s-1); }
  .nav__link {
    padding: var(--s-2) var(--s-3);
    border-bottom: 0;
    font-size: var(--t-sm);
    border-radius: var(--radius);
  }
  .nav__link[aria-current="page"] {
    box-shadow: none;
    background: var(--mist-50);
  }
}

/* Language toggle — two real buttons, not a select.
   aria-pressed communicates state; the labels are never translated. */
.lang {
  display: inline-flex;
  border: 1px solid var(--mist-200);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.lang__btn {
  min-height: 36px;
  min-width: 44px;
  padding: var(--s-1) var(--s-3);
  background: var(--white);
  border: 0;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}
.lang__btn + .lang__btn { border-left: 1px solid var(--mist-200); }
.lang__btn[aria-pressed="true"] { background: var(--green-700); color: var(--white); }
.lang__btn:hover:not([aria-pressed="true"]) { background: var(--mist-50); color: var(--green-700); }

/* ==========================================================================
   6. HERO
   The one place boldness is spent: the phone number, and a single
   signal-arc motif lifted from the logo. The motif appears here and
   nowhere else on the site.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--green-900);
  color: var(--mist-100);
  padding-block: var(--s-8) var(--s-8);
}
@media (min-width: 48rem) { .hero { padding-block: var(--s-9); } }

.hero__arcs {
  position: absolute;
  right: -14rem;
  top: 50%;
  transform: translateY(-50%);
  width: 46rem;
  height: 46rem;
  pointer-events: none;
  opacity: 0.5;
}
@media (min-width: 64rem) { .hero__arcs { right: -8rem; opacity: 0.62; } }

.hero__inner { position: relative; z-index: 1; }
.hero h1 { color: var(--white); max-width: 18ch; }

.hero__lede {
  margin-top: var(--s-5);
  max-width: 54ch;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--mist-100);
}

.hero__actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Interior page header — same structure, quieter. No arcs. */
.page-head {
  background: var(--mist-50);
  border-bottom: 1px solid var(--mist-200);
  padding-block: var(--s-7);
}
.page-head__lede {
  margin-top: var(--s-4);
  max-width: 58ch;
  font-size: var(--t-lg);
  color: var(--ink-muted);
}

.breadcrumb { font-size: var(--t-sm); color: var(--ink-muted); margin-bottom: var(--s-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); color: var(--mist-200); }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn--call {
  background: var(--white);
  color: var(--green-900);
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
}
.btn--call:hover { background: var(--mist-100); color: var(--green-900); }

.btn--primary { background: var(--green-700); color: var(--white); }
.btn--primary:hover { background: var(--green-900); color: var(--white); }

.btn--ghost { border-color: currentColor; color: var(--white); background: transparent; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }

.btn--outline { border-color: var(--green-700); color: var(--green-700); background: var(--white); }
.btn--outline:hover { background: var(--green-700); color: var(--white); }

/* Header phone — ALWAYS visible, at every width.
   This audience is frequently on a phone, outdoors, under stress, often
   outside a courthouse or a jail. The number is the single most important
   control on the site and it never scrolls away. Below 48rem the digits
   are dropped and the icon carries it, with the number kept as the
   accessible name so screen readers still announce it in full. */
.header-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--s-2) var(--s-3);
  background: var(--green-700);
  color: var(--white);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  flex: none;
}
.header-call:hover { background: var(--green-900); color: var(--white); }
.header-call__icon { font-size: 1.15em; line-height: 1; }
.header-call__number { display: none; }

@media (min-width: 48rem) {
  .header-call { padding: var(--s-2) var(--s-4); }
  .header-call__number { display: inline; }
}

/* Below 26rem the logo wordmark yields before any control does. */
@media (max-width: 25.99rem) {
  .site-header__logo svg { width: 128px; height: auto; }
  .nav-toggle__label { display: none; }
}

/* ==========================================================================
   7. CONTENT COMPONENTS
   ========================================================================== */

/* BLUF — the direct answer, placed immediately under an H2.
   The left rule is not decoration: it marks "this is the answer to the
   heading above", which is what both a skim-reader and an AI answer
   engine are looking for. */
.bluf {
  margin-top: var(--s-4);
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 3px solid var(--green-600);
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure);
}
.bluf > p { max-width: none; }

.lead { font-size: var(--t-lg); color: var(--ink-muted); max-width: 58ch; }

/* Content grid — sidebar collapses under 64rem */
.layout {
  display: grid;
  gap: var(--s-8);
}
@media (min-width: 64rem) {
  .layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-9); align-items: start; }
}

.sidebar { display: grid; gap: var(--s-5); }
@media (min-width: 64rem) { .sidebar { position: sticky; top: 5.5rem; } }

.card {
  padding: var(--s-5);
  background: var(--mist-50);
  border: 1px solid var(--mist-200);
  border-radius: var(--radius-lg);
}
.card h3 { font-size: var(--t-lg); }
.card > * + * { margin-top: var(--s-3); }

/* Spec table — product pages */
.spec { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.spec caption { text-align: left; font-weight: 600; padding-bottom: var(--s-3); color: var(--ink-muted); }
.spec th, .spec td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--mist-200); vertical-align: top; }
.spec th { font-weight: 600; color: var(--green-900); width: 40%; }
.spec tbody tr:nth-child(odd) { background: var(--mist-50); }

/* ==========================================================================
   8. FAQ
   Built on <details>/<summary>: keyboard accessible and screen-reader
   correct with no JavaScript, and it still works if JS fails.
   ========================================================================== */

.faq { max-width: var(--measure); }
.faq__item { border-bottom: 1px solid var(--mist-200); }
.faq__item:first-of-type { border-top: 1px solid var(--mist-200); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-1);
  min-height: 48px;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--green-900);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--green-700); }

.faq__q::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.4em;
  border-right: 2px solid var(--green-600);
  border-bottom: 2px solid var(--green-600);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.faq__item[open] > .faq__q::after { transform: rotate(-135deg); }

.faq__a { padding: 0 var(--s-1) var(--s-5); }
.faq__a > * + * { margin-top: var(--s-4); }

/* ==========================================================================
   9. DISCLAIMER
   Regulated-industry guardrail. Deliberately plain — it should read as a
   notice, not as a styled callout competing with the content.
   ========================================================================== */

.disclaimer {
  margin-top: var(--s-8);
  padding: var(--s-5);
  background: var(--mist-50);
  border: 1px solid var(--mist-200);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.disclaimer h2, .disclaimer h3 {
  font-size: var(--t-sm);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */

.cta-band { background: var(--green-900); color: var(--mist-100); padding-block: var(--s-8); }
.cta-band h2 { color: var(--white); max-width: 22ch; }
.cta-band p { margin-top: var(--s-4); max-width: 52ch; color: var(--mist-100); }
.cta-band__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--green-900);
  color: var(--mist-200);
  padding-block: var(--s-8) var(--s-6);
  border-top: 4px solid var(--green-600);
  font-size: var(--t-sm);
}
.site-footer a { color: var(--mist-100); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.site-footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); } }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--s-3);
  letter-spacing: 0;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer__logo img { height: 48px; width: auto; margin-bottom: var(--s-4); }

/* NAP — the one block that must byte-match the Google Business Profile.
   Do not reformat. See G2 brief. */
.nap { font-style: normal; line-height: 1.7; }
.nap__row { display: block; }
.nap a { text-decoration: underline; }

.site-footer__legal {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  font-size: var(--t-xs);
  color: var(--mist-200);
}
.site-footer__legal p { margin: 0; }

/* ==========================================================================
   12. CHAT SLOT
   Reserved mount point. The widget is built post-launch; this reserves
   space so it cannot cause layout shift, and keeps the vendor out of markup.
   ========================================================================== */

#chat-slot {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 90;
  width: auto;
  height: auto;
}
#chat-slot:empty { display: none; }

@media (max-width: 47.99rem) {
  /* Keep clear of thumb-reach CTAs on small screens */
  #chat-slot { bottom: var(--s-3); right: var(--s-3); }
}

/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }
.measure { max-width: var(--measure); }
.text-muted { color: var(--ink-muted); }

/* ==========================================================================
   14. MOTION + PRINT
   ========================================================================== */

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

@media (prefers-contrast: more) {
  :root { --ink-muted: #2C3833; --mist-200: #9FB0A6; }
}

@media print {
  .site-header, .nav, .lang, #chat-slot, .cta-band, .hero__arcs { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .hero, .site-footer { background: none !important; color: #000 !important; }
  .hero h1, .site-footer h2 { color: #000 !important; }
}

/* ==========================================================================
   15. VIDEO EMBED
   Aspect-ratio box so a third-party iframe cannot cause layout shift.
   ========================================================================== */

figure { margin: 0; }

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--green-900);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
figcaption { margin-top: var(--s-2); font-size: var(--t-sm); }

/* ==========================================================================
   16. PAYMENT FORM (/payments/) — G5 batch 5
   PayPal hosted-button form. The POST body is locked: style only, never
   rename control names or values. See claude/FGM-PAYMENTS-FORM-CAPTURED.md.
   .pay-form__row is also reused by the dormant contact form (pages.py).
   ========================================================================== */

.pay-form__row label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s-1);
}
.pay-form__row select,
.pay-form__row input,
.pay-form__row textarea {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--mist-200);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  min-width: min(100%, 16rem);
}
.pay-form input[type="image"] {
  display: block;
  margin-top: var(--s-4);
}

.prose ol { max-width: var(--measure); padding-left: var(--s-5); }
.prose ol li::marker { color: var(--green-600); font-weight: 600; }

/* ===========================================================================
   L2 RE-SKIN LAYER — 2026-10-05 — her look, our bones.
   Appended as an override layer so the pre-skin rules above remain the
   audit trail. Spec + recipes: claude/FGM-L1-LOOK-PARITY-SPEC.md.
   =========================================================================== */

/* --- announcement strip (plain div — never a heading) --------------------- */
.announce {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-4);
}

/* --- header ---------------------------------------------------------------- */
.site-header { background: var(--white); border-bottom: 0; box-shadow: none; }
.site-header__bar { gap: var(--s-5); padding-block: var(--s-3); }
.site-header__logo img { height: 104px; width: auto; display: block; }

.nav__link {
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 400;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__link:hover { color: var(--blue); }
.nav__caret { font-size: 0.7em; margin-left: 2px; }

/* dropdowns: CSS hover/focus-within keeps them usable with JS off;
   site.js adds click + aria-expanded + Escape on top */
.nav__item--sub { position: relative; }
.nav__sub {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  background: var(--white);
  border-top: 2px solid var(--blue);
  box-shadow: var(--shadow-md);
  min-width: 16rem;
}
.nav__sublink {
  display: block;
  padding: var(--s-3) var(--s-5);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-base);
}
.nav__sublink:hover { color: var(--blue); background: var(--tint); }

@media (min-width: 61rem) {
  .nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    display: none;
  }
  .nav__item--sub:hover .nav__sub,
  .nav__item--sub:focus-within .nav__sub,
  .nav__item--sub[data-open="true"] .nav__sub { display: block; }
}
@media (max-width: 60.99rem) {
  .nav__sub { border-top: 0; box-shadow: none; padding-left: var(--s-5); }
}

/* header call pill — her green button */
.header-call,
.header-call:visited {
  background: var(--green-action);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
  text-decoration: none;
}
.header-call:hover { background: var(--green-action-hover); color: var(--white); }

/* --- buttons: one corrected green everywhere ------------------------------- */
.btn--primary,
.btn--call {
  background: var(--green-action);
  color: var(--white);
  border-color: var(--green-action);
  font-size: var(--t-lg);
  font-weight: 600;
}
.btn--primary:hover,
.btn--call:hover {
  background: var(--green-action-hover);
  border-color: var(--green-action-hover);
  color: var(--white);
}
.btn--outline { border-color: var(--green-action); color: var(--green-action); }
.btn--outline:hover { background: var(--green-action); color: var(--white); }

/* --- eyebrow + home heading block ------------------------------------------ */
.eyebrow {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: var(--t-sm);
  margin: 0 0 var(--s-3);
}
.page-head--home {
  background: var(--white);
  border-bottom: 0;
  padding-block: var(--s-8) var(--s-6);
}
.page-head--home h1 { color: var(--heading-ink); max-width: 26ch; }

/* --- inner-page hero: her three-layer recipe (post-82.css) ----------------- */
/* layer 1 solid navy; layer 2 greyscale lines, cover; layer 3 = that image
   at opacity .25 with mix-blend-mode luminosity. Flex column, content
   bottom; 100px/20px padding desktop, 50px/10px mobile; H1 white with her
   text-shadow. Breadcrumb + lede recoloured for the dark band. */
.page-head:not(.page-head--home) {
  position: relative;
  background: var(--navy);
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  padding: 100px 20px;
}
.page-head:not(.page-head--home)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/background-lines.webp") center / cover no-repeat;
  opacity: 0.25;
  mix-blend-mode: luminosity;
}
.page-head:not(.page-head--home) .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}
.page-head:not(.page-head--home) h1 {
  color: var(--white);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  max-width: 680px;
}
.page-head:not(.page-head--home) .page-head__lede { color: var(--separator); }
.page-head:not(.page-head--home) .breadcrumb,
.page-head:not(.page-head--home) .breadcrumb a { color: var(--separator); }
@media (max-width: 767px) {
  .page-head:not(.page-head--home) { padding: 50px 10px; }
}

/* --- full-bleed band helper ------------------------------------------------ */
.band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: var(--s-8);
  margin-block: var(--s-8);
}
.band--tint { background: var(--tint); }
.band--navy { background: var(--blue); }
.band--navy h2,
.band--navy .bluf p,
.band--navy > p { color: var(--white); }
.band--navy .eyebrow { color: var(--white); }

/* --- device slider (manual only; no-JS = slides stack) --------------------- */
.slider {
  position: relative;
  margin: 0;
  background: var(--tint);
  border-bottom: 1px solid var(--separator);
}
.slider__slide {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s-7) var(--s-5);
}
.slider__slide img {
  width: 100%;
  max-width: 420px;
  height: auto;
  justify-self: center;
}
.slider__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  color: var(--blue);
  margin: 0 0 var(--s-2);
}
.slider__caption p:not(.slider__name) { color: var(--ink); max-width: 52ch; }
.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--separator);
  background: var(--white);
  color: var(--blue);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.slider__btn:hover { background: var(--tint); }
.slider__btn--prev { left: var(--s-3); }
.slider__btn--next { right: var(--s-3); }
@media (max-width: 767px) {
  .slider__slide { grid-template-columns: 1fr; text-align: center; }
  .slider__caption p:not(.slider__name) { margin-inline: auto; }
}

/* --- service card grid (home) ---------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-6);
}
.card--service {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
}
.card--service img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.card--service h3 { margin-top: var(--s-4); }
.card--service h3 a { color: var(--heading-ink); text-decoration: none; }
.card--service h3 a:hover { color: var(--blue); text-decoration: underline; }
.card--service p { margin: var(--s-2) auto 0; max-width: 34ch; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* --- products band (home) + product cards ----------------------------------- */
.pcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.pcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pcard img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: linear-gradient(180deg, #FAFBFC 0%, #E9ECEF 100%);
  padding: var(--s-4);
  box-sizing: border-box;
}
.pcard__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.pcard__body h3 { color: var(--blue); }
.pcard__body h3 a { color: var(--blue); text-decoration: none; }
.pcard__body h3 a:hover { text-decoration: underline; }
.pcard__badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  background: var(--pill-grey);
  color: var(--white);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
}
@media (max-width: 860px) { .pcards { grid-template-columns: 1fr; } }

/* --- content hero figures ---------------------------------------------------- */
.page-hero-img { margin: 0 0 var(--s-6); }
.page-hero-img img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.device-figure { margin: 0 0 var(--s-6); text-align: center; }
.device-figure img { max-width: 420px; width: 100%; height: auto; }

/* --- FAQ: her card accordion on the tint ------------------------------------- */
.faq { margin-top: var(--s-7); }
.faq__item {
  background: var(--white);
  border: 1px solid var(--border-faq);
  border-radius: var(--radius);
  margin-top: var(--s-3);
}
.faq__q { color: var(--faq-navy); font-weight: 600; }
.faq__item summary::marker { color: var(--green-brand); }
.faq__item summary { color: var(--faq-navy); }

/* --- CTA band: navy @ .9 over the flag photo (post-2319.css) ----------------- */
.cta-band {
  position: relative;
  background: var(--navy);
  isolation: isolate;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/bonnie-kittle-2ERdMv4LGm8-unsplash.webp") center / cover no-repeat;
  z-index: -2;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: 0.9;
  z-index: -1;
}
.cta-band h2 {
  color: var(--white);
  font-size: var(--t-4xl);
  font-weight: 600;
  max-width: 24ch;
  margin-inline: auto;
}
.cta-band p { color: var(--white); margin-inline: auto; }
.cta-band__actions { justify-content: center; }

/* --- footer: her white centred strip ------------------------------------------ */
.site-footer {
  background: var(--white);
  color: var(--ink);
  border-top: 1px solid var(--separator);
  text-align: center;
  padding-block: var(--s-8) var(--s-5);
}
.site-footer__name {
  font-weight: 600;
  color: var(--heading-ink);
  font-size: var(--t-lg);
  margin: 0 0 var(--s-3);
}
.site-footer .nap { font-style: normal; }
.site-footer .nap__row { display: block; }
.site-footer .nap a { color: var(--green-action); }
.site-footer .nap a:hover { color: var(--green-action-hover); }
.site-footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--separator);
  color: var(--ink);
}
.site-footer__legal a { color: var(--green-action); }
.site-footer__legal a:hover { color: var(--green-action-hover); }

/* --- back to top ---------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 60;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.to-top:hover { background: var(--navy); }

/* --- two-tone focus: ends the per-surface contrast class of problem ------------ */
/* white inner ring (worst dark surface shipped: 5.25:1 on the green button;
   12.43:1 on navy) + #9C7007 gold outer ring (4.44:1 white, 4.05:1 tint).
   At least one ring clears 3:1 against ANY background by construction.
   Gold stays deliberately non-brand so focus never reads as a link. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--white);
}

/* --- print + motion -------------------------------------------------------------- */
@media print {
  .announce, .slider__btn, .to-top, .nav__sub { display: none !important; }
  .page-head:not(.page-head--home),
  .cta-band { background: var(--white) !important; }
  .page-head:not(.page-head--home) h1 { color: var(--heading-ink); text-shadow: none; }
  .page-head:not(.page-head--home)::before,
  .cta-band::before, .cta-band::after { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* --- L2 visual-pass fixes (2026-10-05, same gate) -------------------------- */
.slider__slide[hidden] { display: none; }
.site-header { position: static; }
.band--navy > p a { color: var(--white); }
.nav__link[aria-current="page"],
.nav__list .nav__link[aria-current="page"] {
  background: transparent;
  color: var(--blue);
  font-weight: 600;
  box-shadow: none;
}
.prose .page-hero-img { max-width: 56rem; }
.cta-band { padding-block: var(--s-9); }
.site-footer p { max-width: none; }
/* mobile drawer: sit above the slider's stacking context and below the
   taller re-skin header (announce + logo) */
@media (max-width: 59.99rem) {
  .nav { z-index: 70; inset: 10.25rem 0 auto 0; }
  .nav__sub { border-top: 0; box-shadow: none; padding-left: var(--s-5); }
}

/* --- slider canvas to navy (Rahul, 2026-10-05): her dark above-the-fold
   weight, same clean shots + HTML text. XC5/OM500 PNGs are transparent and
   float on the navy; the GEOSATIS photo has a baked studio background, so
   that slide presents as a white card (reads like the product cards). ----- */
.slider { background: var(--navy); border-bottom: 0; }
.slider__name { color: var(--white); }
.slider__caption p:not(.slider__name) { color: var(--separator); }
.slider__img--card {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-sizing: border-box;
  max-width: 340px;
}

/* --- identical-A slider (Rahul, 2026-10-05 16:16): her three banner JPGs,
   full-bleed, her order. Buttons/manual behaviour unchanged. ---------------- */
.slider__slide--banner { display: block; padding: 0; max-width: none; }
.slider__slide--banner img { display: block; width: 100%; height: auto; }
.slider__slide--banner img { max-width: none; }