/* ============================================================
   FIRST ADVANTAGE SECURITY — SITE STYLESHEET
   Visual reference for the Elementor build. Shared by all pages.
   Tokens below map 1:1 to Doc 3 (Design System).
   PRODUCTION NOTE: self-host fonts; do not load from Google CDN.
   ============================================================ */

:root{
  --fa-navy:#001A6B;
  --fa-navy-deep:#001348;
  --fa-indigo:#2A3391;
  --fa-body:#22304A;
  --fa-cyan:#3EBEE0;
  --fa-cyan-deep:#1268A0;
  --fa-due:#F2A81D;
  --fa-ok:#3FD08C;
  --fa-ok-dark:#17804C;
  --fa-overdue:#D0342C;
  --fa-sky:#E8F4FA;
  --fa-line:#C7D3E0;
  --fa-muted:#5E7086;
  --fa-paper:#FFFFFF;

  --fa-display:'Archivo',system-ui,sans-serif;
  --fa-sans:'IBM Plex Sans',system-ui,sans-serif;
  --fa-mono:'IBM Plex Mono',ui-monospace,monospace;

  --fa-container:1200px;
  --fa-narrow:720px;
  --fa-radius:4px;
  --fa-radius-card:6px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--fa-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--fa-body);
  background:var(--fa-paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

:focus-visible{outline:3px solid var(--fa-due);outline-offset:2px;}

.fa-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--fa-cyan);color:#fff;padding:12px 20px;
  font-family:var(--fa-mono);font-size:13px;text-decoration:none;
}
.fa-skip:focus{left:0;}

/* ---------- Layout primitives ---------- */
.fa-wrap{max-width:var(--fa-container);margin:0 auto;padding:0 40px;}
.fa-narrow{max-width:var(--fa-narrow);margin:0 auto;}
.fa-sec{padding:96px 0;}
.fa-sec--compact{padding:72px 0;}
.fa-sec--sky{background:var(--fa-sky);}
.fa-sec--navy{background:var(--fa-navy);color:#fff;}

/* ---------- Type ---------- */
.fa-eyebrow{
  font-family:var(--fa-mono);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fa-cyan-deep);
  margin:0 0 14px;display:block;
}
/* Was var(--fa-cyan) #3EBEE0, which sat at 4.85:1 on the hero — fine until the
   streak layer lifted the worst-case ground and took it to 4.45:1, under AA.
   Lightening the eyebrow rather than weakening the streaks further gives this
   permanent headroom: it only applies on dark grounds, which is exactly where
   the margin was thin. --fa-cyan itself is untouched. */
.fa-eyebrow--light{color:#6FD2EE;}
h1,h2,h3,h4{font-family:var(--fa-display);margin:0 0 20px;color:var(--fa-navy);}
.fa-sec--navy h1,.fa-sec--navy h2,.fa-sec--navy h3,.fa-sec--navy h4{color:#fff;}
h1{font-size:64px;font-weight:800;line-height:1.04;letter-spacing:-.025em;}
h2{font-size:44px;font-weight:700;line-height:1.12;letter-spacing:-.02em;}
h3{font-size:28px;font-weight:700;line-height:1.22;letter-spacing:-.01em;}
h4{font-size:21px;font-weight:600;line-height:1.3;}
p{margin:0 0 20px;}
.fa-lead{font-size:20px;line-height:1.55;}
.fa-data{
  font-family:var(--fa-mono);font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fa-muted);
}
.fa-rule{width:56px;height:3px;background:var(--fa-cyan);margin:0 0 24px;border:0;}

/* ---------- Buttons ---------- */
.fa-btn{
  display:inline-block;font-family:var(--fa-display);font-weight:600;
  font-size:16px;letter-spacing:.01em;line-height:1;text-decoration:none;
  padding:18px 34px;border-radius:var(--fa-radius);border:2px solid transparent;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
  cursor:pointer;
}
.fa-btn--primary{background:var(--fa-cyan);color:var(--fa-navy);}
.fa-btn--primary:hover{background:var(--fa-cyan-deep);color:#fff;}
.fa-btn--secondary{background:transparent;color:var(--fa-navy);border-color:var(--fa-navy);padding:16px 32px;}
.fa-btn--secondary:hover{background:var(--fa-navy);color:#fff;}
.fa-btn--ondark{background:var(--fa-cyan);color:var(--fa-navy);}
.fa-btn--ondark:hover{background:#fff;color:var(--fa-navy);}
.fa-btn--ghostdark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);padding:16px 32px;}
.fa-btn--ghostdark:hover{background:#fff;color:var(--fa-navy);border-color:#fff;}
.fa-btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}

.fa-textlink{
  font-family:var(--fa-display);font-weight:600;font-size:16px;
  color:var(--fa-cyan-deep);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
}
.fa-textlink:hover{text-decoration:underline;}

/* ---------- Utility bar ---------- */
.fa-util{background:var(--fa-navy-deep);border-bottom:1px solid rgba(255,255,255,.1);}
.fa-util .fa-wrap{
  display:flex;gap:28px;align-items:center;height:40px;
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}
.fa-util span{display:flex;align-items:center;gap:28px;}
.fa-util span::after{content:"";width:4px;height:4px;background:var(--fa-cyan);border-radius:50%;}
.fa-util span:last-child::after{display:none;}

/* ---------- Header ---------- */
.fa-hdr{
  position:sticky;top:0;z-index:100;background:var(--fa-paper);
  border-bottom:1px solid var(--fa-line);
  box-shadow:0 2px 12px -6px rgba(0,26,107,.18);
}
.fa-hdr .fa-wrap{display:flex;align-items:center;gap:36px;height:80px;}
.fa-logo{display:block;flex-shrink:0;line-height:0;}
.fa-logo img{height:46px;width:auto;}
/* Typographic wordmark — stand-in until a reversed logo SVG exists (see Doc 3 §2.1) */
.fa-wordmark{
  font-family:var(--fa-display);font-weight:800;font-size:19px;
  color:#fff;text-decoration:none;line-height:1.05;letter-spacing:-.02em;
  border-left:4px solid var(--fa-cyan);padding-left:12px;display:inline-block;
}
.fa-wordmark small{
  display:block;font-family:var(--fa-mono);font-weight:500;font-size:10px;
  letter-spacing:.16em;color:var(--fa-cyan);text-transform:uppercase;margin-top:4px;
}
.fa-nav{display:flex;gap:26px;margin-left:auto;}
.fa-nav a{
  font-family:var(--fa-sans);font-weight:500;font-size:15px;
  color:var(--fa-navy);text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent;transition:border-color 160ms ease,color 160ms ease;
}
.fa-nav a:hover{color:var(--fa-cyan-deep);border-bottom-color:var(--fa-cyan);}
.fa-hdr-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.fa-phone{
  font-family:var(--fa-mono);font-weight:600;font-size:15px;
  color:var(--fa-navy);text-decoration:none;white-space:nowrap;
}
.fa-phone:hover{color:var(--fa-cyan-deep);}
.fa-hdr .fa-btn{padding:13px 22px;font-size:14px;}
.fa-burger{display:none;background:none;border:0;color:var(--fa-navy);padding:8px;margin-left:auto;}

/* ---------- Hero ---------- */
/* Inner-page hero.
   Was a flat `var(--fa-navy)` fill, which read as a solid slab of blue on every
   page except the homepage — the homepage had a three-stop gradient all along,
   which is why only the inner pages looked heavy. This gives them the same
   treatment with a deliberately wider tonal range than the homepage
   (#00071F is darker than the homepage's #000A28, #0E3F8E lighter than its
   #0B3A86), so a short hero still shows visible movement across its height.

   The lightest stop is what governs legibility: composited under the ::after
   glow it lands near rgb(39,52,145), which keeps the sky-coloured h1 and the
   white body text at the same ratios they hold on the homepage. Do not lighten
   #0E3F8E further without re-measuring. */
.fa-hero{
  background:linear-gradient(124deg,#00071F 0%,#001A6B 52%,#0E3F8E 100%);
  color:#fff;padding:112px 0 96px;position:relative;overflow:hidden;
}
.fa-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 78% 12%,rgba(42,51,145,.9),transparent 70%);
}

/* ---------- Light streaks on the inner-page hero ----------
   The client asked for something like try.edgaragents.com, where diagonal
   light beams drift across a navy hero. Worth knowing how that site does it:
   the beams are a background VIDEO (EA_bg_video.mp4) over a static JPEG —
   no canvas, no keyframes, no animation library. I checked for all of them.

   That is several megabytes on every page load for a decorative background,
   which is the same cost we already turned down for the homepage. The effect
   itself is just soft angled highlights on a dark ground, and that is a
   gradient — so it costs zero bytes and zero requests here.

   Three streaks at different angles, widths and opacities so the repeat is
   not readable as a pattern. The whole layer is capped very low in alpha:
   measured after, the hero h1 holds 9.4:1 and body text 10.5:1, unchanged,
   because the streaks sit under the content and never brighten the darkest
   region where the text actually sits.

   Homepage excluded — it already carries the arc and the photograph, and a
   third decorative layer there would be noise. */
.fa-hero:not(.fa-hero--home)::before{
  content:"";position:absolute;inset:-20% -10%;pointer-events:none;z-index:0;
  /* Alphas were .11/.08/.06 on the first pass. Measured after, that lifted the
     worst-case hero ground from rgb(39,52,145) to rgb(42,67,153) and dropped
     the cyan eyebrow from 4.85:1 to 4.07:1 — under AA. Decorative background
     does not get to cost legibility, so these are roughly halved. */
  background:
    linear-gradient(104deg,transparent 38%,rgba(62,190,224,.055) 44%,transparent 49%),
    linear-gradient(99deg,transparent 55%,rgba(120,190,255,.04) 61%,transparent 65%),
    linear-gradient(112deg,transparent 70%,rgba(62,190,224,.03) 76%,transparent 81%);
  filter:blur(2px);
  transform:translate3d(0,0,0);
  animation:fa-streaks 34s ease-in-out infinite alternate;
}
@keyframes fa-streaks{
  from{transform:translate3d(-3%,0,0) scaleY(1);}
  to{transform:translate3d(3%,0,0) scaleY(1.06);}
}

/* The hero's own children must sit above the streak layer. */
.fa-hero > *{position:relative;z-index:2;}

@media (prefers-reduced-motion:reduce){
  .fa-hero:not(.fa-hero--home)::before{animation:none;}
}
.fa-hero .fa-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
.fa-hero p{color:rgba(255,255,255,.82);max-width:52ch;}
.fa-trustrow{
  display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:36px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}

/* ---------- SIGNATURE: annunciator panel ---------- */
.fa-panel{
  background:var(--fa-indigo);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--fa-radius-card);overflow:hidden;
  box-shadow:0 28px 64px -28px rgba(0,0,0,.7);
}
.fa-panel-hd{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;background:rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.fa-panel-badge{
  display:inline-flex;align-items:center;gap:7px;color:var(--fa-ok);
  font-weight:600;
}
.fa-row{
  display:flex;align-items:center;gap:14px;padding:15px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--fa-mono);font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
}
.fa-row:last-of-type{border-bottom:0;}
.fa-row-state{margin-left:auto;color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.1em;}
.fa-dot{
  width:10px;height:10px;border-radius:50%;background:var(--fa-ok);
  box-shadow:0 0 0 4px rgba(63,208,140,.18);flex-shrink:0;
  animation:fa-pulse 3s ease-in-out infinite;
}
.fa-dot--due{background:var(--fa-due);box-shadow:0 0 0 4px rgba(242,168,29,.2);animation:none;}
.fa-dot--overdue{background:var(--fa-overdue);box-shadow:0 0 0 4px rgba(208,52,44,.2);animation:none;}
@keyframes fa-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.fa-panel-ft{
  padding:15px 20px;background:rgba(0,0,0,.28);
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--fa-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fa-cyan);text-align:center;
}


/* ---------- SIGNATURE: logo medallion + system orbit ---------- */
.fa-orbit{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto;}
.fa-ring{
  position:absolute;inset:13%;border-radius:50%;
  border:1px solid rgba(62,190,224,.32);
}
.fa-ring--inner{inset:22%;border-color:rgba(62,190,224,.16);}
.fa-glow{
  position:absolute;inset:8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(62,190,224,.30) 0%,rgba(62,190,224,.10) 45%,transparent 68%);
}
.fa-medallion{
  position:absolute;inset:27%;border-radius:50%;background:var(--fa-paper);
  display:flex;align-items:center;justify-content:center;padding:11%;
  box-shadow:0 0 0 10px rgba(62,190,224,.12),0 24px 60px -20px rgba(0,0,0,.65);
}
.fa-medallion img{width:100%;height:auto;}
.fa-node{
  position:absolute;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 14px;border-radius:3px;
  background:rgba(0,19,72,.82);border:1px solid rgba(62,190,224,.38);
  backdrop-filter:blur(4px);
  font-family:var(--fa-mono);font-weight:500;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
}
.fa-node .fa-dot{width:8px;height:8px;box-shadow:0 0 0 3px rgba(63,208,140,.2);}
.fa-node:nth-child(2) .fa-dot{animation-delay:.5s}
.fa-node:nth-child(3) .fa-dot{animation-delay:1s}
.fa-node:nth-child(4) .fa-dot{animation-delay:1.5s}
.fa-node:nth-child(5) .fa-dot{animation-delay:2s}
.fa-node:nth-child(6) .fa-dot{animation-delay:2.5s}
.fa-orbit-cap{
  position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  font-family:var(--fa-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fa-cyan);white-space:nowrap;
}
@media (max-width:880px){
  .fa-orbit{aspect-ratio:auto;max-width:460px;}
  .fa-ring,.fa-glow,.fa-orbit-cap{display:none;}
  .fa-medallion{
    position:static;inset:auto;width:180px;height:180px;
    margin:0 auto 28px;padding:22px;
  }
  .fa-nodes{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .fa-node{position:static;transform:none;justify-content:flex-start;}
}
@media (max-width:480px){ .fa-nodes{grid-template-columns:1fr;} }

/* ---------- System cards ---------- */
.fa-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.fa-card{
  background:var(--fa-paper);border:1px solid var(--fa-line);
  border-radius:var(--fa-radius-card);padding:32px;
  transition:border-color 200ms ease,box-shadow 200ms ease;
}
.fa-card:hover{border-color:var(--fa-navy);box-shadow:0 12px 32px -12px rgba(11,30,40,.18);}
.fa-card h3{font-size:22px;margin-bottom:12px;}
.fa-card p{font-size:16px;color:var(--fa-body);margin-bottom:18px;}
.fa-ico{
  width:44px;height:44px;border-radius:var(--fa-radius);
  background:var(--fa-sky);color:var(--fa-navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.fa-ico--life{background:rgba(62,190,224,.18);color:var(--fa-navy);}
.fa-ico svg{width:22px;height:22px;stroke-width:1.75;}

/* ---------- Compliance table ---------- */
.fa-table{width:100%;border-collapse:collapse;margin-top:40px;font-size:16px;}
.fa-table th{
  text-align:left;padding:14px 16px;border-bottom:2px solid rgba(255,255,255,.25);
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fa-cyan);font-weight:600;
}
.fa-table td{
  padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.9);vertical-align:top;
}
.fa-table td:first-child{font-weight:600;color:#fff;}
.fa-table .fa-int{font-family:var(--fa-mono);font-size:14px;letter-spacing:.03em;color:var(--fa-cyan);}
.fa-table .fa-ref{font-family:var(--fa-mono);font-size:13px;color:rgba(255,255,255,.6);}
.fa-status{display:inline-flex;align-items:center;gap:9px;font-family:var(--fa-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;}
.fa-caption{
  margin-top:22px;font-family:var(--fa-mono);font-size:12px;line-height:1.7;
  letter-spacing:.04em;color:rgba(255,255,255,.55);max-width:70ch;
}

/* ---------- Reason columns ---------- */
.fa-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.fa-reason{border-top:2px solid var(--fa-navy);padding-top:24px;}
.fa-reason h3{margin-bottom:12px;}
.fa-reason p{font-size:16px;margin:0;color:var(--fa-body);}

/* ---------- Tag grid ---------- */
.fa-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.fa-tag{
  display:inline-block;padding:12px 20px;background:var(--fa-paper);
  border:1px solid var(--fa-line);border-radius:var(--fa-radius);
  font-family:var(--fa-mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fa-navy);text-decoration:none;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
.fa-tag:hover{background:var(--fa-navy);color:#fff;border-color:var(--fa-navy);}

/* ---------- Stats ---------- */
.fa-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.fa-stat{border-left:3px solid var(--fa-cyan);padding-left:20px;}
.fa-stat b{
  display:block;font-family:var(--fa-display);font-weight:800;font-size:52px;
  line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:8px;
}
.fa-stat span{font-family:var(--fa-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);}
.fa-quote{
  margin-top:56px;padding:32px;background:rgba(255,255,255,.05);
  border-left:3px solid var(--fa-cyan);border-radius:0 var(--fa-radius-card) var(--fa-radius-card) 0;
}
.fa-quote p{font-size:20px;line-height:1.5;color:#fff;font-style:italic;margin-bottom:14px;}
.fa-quote cite{font-family:var(--fa-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fa-cyan);font-style:normal;}

/* ---------- Split rows ---------- */
.fa-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.fa-ph{
  aspect-ratio:4/3;background:var(--fa-sky);border:1px dashed var(--fa-line);
  border-radius:var(--fa-radius-card);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:32px;font-family:var(--fa-mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fa-muted);line-height:1.8;
}
.fa-sec--navy .fa-ph{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55);}

/* ---------- Areas ---------- */
.fa-areas{display:flex;flex-wrap:wrap;gap:10px 0;margin:28px 0 20px;padding:0;list-style:none;}
.fa-areas li{
  font-family:var(--fa-mono);font-size:14px;letter-spacing:.05em;color:var(--fa-navy);
  padding-right:16px;margin-right:16px;border-right:1px solid var(--fa-line);
}
.fa-areas li:last-child{border-right:0;}

/* ---------- Form ---------- */
.fa-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:var(--fa-radius-card);padding:36px;}
.fa-field{margin-bottom:18px;}
.fa-field label{
  display:block;font-family:var(--fa-sans);font-weight:500;font-size:15px;
  color:#fff;margin-bottom:7px;
}
.fa-field input,.fa-field select{
  width:100%;height:52px;padding:0 16px;background:#fff;
  border:1px solid var(--fa-line);border-radius:var(--fa-radius);
  font-family:var(--fa-sans);font-size:16px;color:var(--fa-body);
}
.fa-field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232B3A42' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
.fa-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fa-checks{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px;}
.fa-check{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--fa-radius);
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.85);cursor:pointer;
  transition:border-color 160ms ease,background-color 160ms ease;
}
.fa-check:hover{border-color:var(--fa-cyan);background:rgba(62,190,224,.14);}
.fa-check input{accent-color:var(--fa-cyan-deep);width:15px;height:15px;margin:0;}
.fa-form .fa-btn{width:100%;text-align:center;margin-top:10px;}
.fa-formnote{margin:16px 0 0;font-family:var(--fa-mono);font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.6);text-align:center;}

/* ---------- Footer ---------- */
.fa-ft{background:var(--fa-navy);color:rgba(255,255,255,.72);padding:72px 0 0;border-top:1px solid rgba(255,255,255,.12);}
.fa-ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px;}
.fa-ft h2{font-family:var(--fa-mono);font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--fa-cyan);margin-bottom:18px;}
.fa-ft ul{list-style:none;margin:0;padding:0;}
.fa-ft li{margin-bottom:11px;font-size:15px;}
.fa-ft a{text-decoration:none;transition:color 160ms ease;}
.fa-ft a:hover{color:#fff;}
.fa-ft-legal{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;
  font-family:var(--fa-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.fa-lic{
  display:inline-block;margin-top:18px;padding:9px 14px;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--fa-radius);
  font-family:var(--fa-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fa-cyan);
}

/* ---------- Mobile action bar ---------- */
.fa-mobilebar{display:none;}

/* ---------- Reveal ---------- */
.fa-reveal{opacity:0;transform:translateY(16px);transition:opacity 500ms ease-out,transform 500ms ease-out;}
.fa-reveal.is-in{opacity:1;transform:none;}


/* ---------- Customer login (utility bar) ---------- */
.fa-util .fa-wrap{justify-content:flex-start;}
.fa-login{margin-left:auto;display:flex;align-items:center;gap:10px;}
.fa-login em{font-style:normal;color:rgba(255,255,255,.6);}
.fa-login a{
  color:var(--fa-cyan);text-decoration:none;padding:4px 10px;
  border:1px solid rgba(62,190,224,.4);border-radius:3px;
  transition:background-color 160ms ease,color 160ms ease;
}
.fa-login a:hover{background:var(--fa-cyan);color:var(--fa-navy);}

/* ---------- Equipment schedule ---------- */
.fa-schedule{border-top:1px solid var(--fa-line);margin-top:8px;}
.fa-line{
  display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--fa-line);
}
.fa-line b{
  font-family:var(--fa-display);font-weight:700;font-size:19px;
  color:var(--fa-navy);letter-spacing:-.01em;
}
.fa-line span{font-size:16px;color:var(--fa-body);}
.fa-line i{
  font-style:normal;font-family:var(--fa-mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fa-muted);white-space:nowrap;
}

/* ---------- Projects ---------- */
.fa-project{
  background:var(--fa-paper);border:1px solid var(--fa-line);
  border-radius:var(--fa-radius-card);overflow:hidden;
  transition:border-color 200ms ease,box-shadow 200ms ease;
}
.fa-project:hover{border-color:var(--fa-navy);box-shadow:0 12px 32px -12px rgba(0,26,107,.18);}
.fa-project-body{padding:26px;}
.fa-project .fa-loc{
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fa-cyan-deep);display:block;margin-bottom:8px;
}
.fa-project h3{font-size:21px;margin-bottom:10px;}
.fa-project p{font-size:16px;margin:0;}

/* ---------- Photo slot ---------- */
.fa-shot{
  aspect-ratio:16/10;background:var(--fa-sky);
  border-bottom:1px solid var(--fa-line);
  display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}
.fa-shot em{
  font-style:normal;font-family:var(--fa-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fa-cyan-deep);
}
.fa-shot span{font-size:13px;color:var(--fa-muted);line-height:1.5;max-width:30ch;}

/* ---------- Hours block ---------- */
.fa-hours{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--fa-line);border-radius:var(--fa-radius-card);
  overflow:hidden;margin-top:36px;
}
.fa-hours div{padding:24px;border-right:1px solid var(--fa-line);}
.fa-hours div:last-child{border-right:0;}
.fa-hours b{
  display:block;font-family:var(--fa-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fa-cyan-deep);margin-bottom:10px;font-weight:600;
}
.fa-hours p{margin:0;font-size:16px;}
.fa-hours small{display:block;margin-top:8px;font-size:14px;color:var(--fa-muted);}

/* ---------- Responsive additions ---------- */
@media (max-width:1024px){
  .fa-line{grid-template-columns:160px 1fr;}
  .fa-line i{grid-column:1 / -1;}
}
@media (max-width:767px){
  .fa-line{grid-template-columns:1fr;gap:6px;padding:16px 0;}
  .fa-hours{grid-template-columns:1fr;}
  .fa-hours div{border-right:0;border-bottom:1px solid var(--fa-line);}
  .fa-hours div:last-child{border-bottom:0;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  .fa-nav{gap:18px;}
  .fa-nav a{font-size:14px;}
}
@media (max-width:1024px){
  .fa-wrap{padding:0 32px;}
  h1{font-size:48px;}
  h2{font-size:36px;}
  .fa-sec{padding:72px 0;}
  .fa-sec--compact{padding:56px 0;}
  .fa-hero{padding:80px 0 64px;}
  .fa-hero .fa-wrap{grid-template-columns:1fr;gap:48px;}
  .fa-nav,.fa-hdr-actions{display:none;}
  .fa-burger{display:block;}
  .fa-logo img{height:40px;}
  .fa-grid3{grid-template-columns:repeat(2,1fr);}
  .fa-grid4{grid-template-columns:repeat(2,1fr);gap:28px;}
  .fa-stats{grid-template-columns:repeat(2,1fr);}
  .fa-split{grid-template-columns:1fr;gap:40px;}
  .fa-ft-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media (max-width:767px){
  body{font-size:16px;}
  .fa-wrap{padding:0 20px;}
  h1{font-size:38px;}
  h2{font-size:30px;}
  h3{font-size:22px;}
  .fa-lead{font-size:18px;}
  .fa-util{display:none;}
  .fa-logo img{height:34px;}
  .fa-hdr .fa-wrap{height:68px;}
  .fa-sec{padding:56px 0;}
  .fa-sec--compact{padding:40px 0;}
  .fa-hero{padding:56px 0 48px;}
  .fa-grid3,.fa-grid4,.fa-stats,.fa-two,.fa-ft-grid{grid-template-columns:1fr;}
  .fa-btnrow{flex-direction:column;}
  .fa-btn{width:100%;text-align:center;}
  .fa-card{padding:24px;}
  .fa-form{padding:24px;}
  .fa-stat b{font-size:38px;}
  body{padding-bottom:72px;}
  .fa-mobilebar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .fa-mobilebar a{
    padding:20px 8px;font-family:var(--fa-display);font-weight:600;font-size:15px;
    text-decoration:none;text-align:center;
  }
  .fa-mobilebar a:first-child{flex:0 0 40%;background:var(--fa-navy);color:#fff;}
  .fa-mobilebar a:last-child{flex:1;background:var(--fa-cyan);color:var(--fa-navy);}
  /* Compliance table → stacked cards */
  .fa-table thead{display:none;}
  .fa-table,.fa-table tbody,.fa-table tr,.fa-table td{display:block;width:100%;}
  .fa-table tr{border-bottom:1px solid rgba(255,255,255,.18);padding:18px 0;}
  .fa-table td{border:0;padding:3px 0;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .fa-reveal{opacity:1;transform:none;}
}


/* ============================================================
   ADDITIONS FOR INTERIOR PAGES
   ============================================================ */

/* ---------- Breadcrumbs ---------- */
.fa-crumbs{
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:26px;
}
.fa-crumbs a{color:var(--fa-cyan);text-decoration:none;}
.fa-crumbs a:hover{text-decoration:underline;}
.fa-crumbs span{padding:0 8px;color:rgba(255,255,255,.3);}

/* ---------- Interior hero (single column) ---------- */
.fa-hero--page .fa-wrap{grid-template-columns:1fr;gap:0;}
.fa-hero--page{padding:80px 0 72px;}
.fa-hero--page .fa-inner{max-width:820px;}
.fa-hero--split .fa-wrap{grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
@media (max-width:1024px){
  .fa-hero--page{padding:64px 0 56px;}
  .fa-hero--split .fa-wrap{grid-template-columns:1fr;gap:44px;}
}

/* ---------- Scope list (what it covers) ---------- */
.fa-scope{list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.fa-scope li{
  padding:18px 0 18px 34px;border-bottom:1px solid var(--fa-line);
  position:relative;font-size:16px;line-height:1.6;
}
.fa-scope li::before{
  content:"";position:absolute;left:0;top:26px;
  width:14px;height:2px;background:var(--fa-cyan);
}
.fa-scope li b{color:var(--fa-navy);font-family:var(--fa-display);font-weight:700;}
.fa-sec--navy .fa-scope li{border-bottom-color:rgba(255,255,255,.14);}
.fa-sec--navy .fa-scope li b{color:#fff;}
@media (max-width:767px){.fa-scope{grid-template-columns:1fr;}}

/* ---------- Approach columns (3-up prose, no cards) ---------- */
.fa-approach{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;}
.fa-approach > div{border-top:2px solid var(--fa-navy);padding-top:22px;}
.fa-approach h3{margin-bottom:12px;}
.fa-approach p{font-size:16px;margin:0;}
.fa-sec--navy .fa-approach > div{border-top-color:var(--fa-cyan);}
@media (max-width:1024px){.fa-approach{grid-template-columns:1fr;gap:32px;}}

/* ---------- Numbered process strip ---------- */
.fa-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:48px;
  border-top:1px solid var(--fa-line);}
.fa-steps--4{grid-template-columns:repeat(4,1fr);}
.fa-step{padding:28px 24px 28px 0;border-right:1px solid var(--fa-line);padding-right:24px;}
.fa-step:last-child{border-right:0;}
.fa-step b{
  display:block;font-family:var(--fa-mono);font-weight:600;font-size:13px;
  letter-spacing:.12em;color:var(--fa-cyan-deep);margin-bottom:14px;
}
.fa-step h3{font-size:19px;margin-bottom:10px;}
.fa-step p{font-size:15px;margin:0;color:var(--fa-body);}
.fa-sec--navy .fa-steps{border-top-color:rgba(255,255,255,.2);}
.fa-sec--navy .fa-step{border-right-color:rgba(255,255,255,.14);}
.fa-sec--navy .fa-step b{color:var(--fa-cyan);}
.fa-sec--navy .fa-step p{color:rgba(255,255,255,.82);}
@media (max-width:1024px){
  .fa-steps,.fa-steps--4{grid-template-columns:1fr 1fr;}
  .fa-step{border-bottom:1px solid var(--fa-line);}
  .fa-sec--navy .fa-step{border-bottom-color:rgba(255,255,255,.14);}
}
@media (max-width:767px){
  .fa-steps,.fa-steps--4{grid-template-columns:1fr;}
  .fa-step{border-right:0;padding-right:0;}
}

/* ---------- FAQ accordion ---------- */
.fa-faq{margin-top:40px;border-top:1px solid var(--fa-line);}
.fa-faq details{border-bottom:1px solid var(--fa-line);}
.fa-faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--fa-display);font-weight:600;font-size:19px;color:var(--fa-navy);
  line-height:1.35;
}
.fa-faq summary::-webkit-details-marker{display:none;}
.fa-faq summary::after{
  content:"";position:absolute;right:8px;top:31px;width:12px;height:12px;
  border-right:2px solid var(--fa-cyan-deep);border-bottom:2px solid var(--fa-cyan-deep);
  transform:rotate(45deg);transition:transform 180ms ease;
}
.fa-faq details[open] summary::after{transform:rotate(-135deg);top:36px;}
.fa-faq .fa-a{padding:0 40px 26px 0;max-width:72ch;}
.fa-faq .fa-a p{font-size:16px;margin:0 0 14px;}
.fa-faq .fa-a p:last-child{margin-bottom:0;}
.fa-sec--navy .fa-faq,.fa-sec--navy .fa-faq details{border-color:rgba(255,255,255,.16);}
.fa-sec--navy .fa-faq summary{color:#fff;}
.fa-sec--navy .fa-faq summary::after{border-color:var(--fa-cyan);}
.fa-sec--navy .fa-faq .fa-a p{color:rgba(255,255,255,.82);}

/* ---------- Two-column CTA (form + what happens next) ---------- */
.fa-ctagrid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;}
@media (max-width:1024px){.fa-ctagrid{grid-template-columns:1fr;gap:44px;}}

/* ---------- Next-steps list (numbered, on dark) ---------- */
.fa-next{list-style:none;margin:32px 0 0;padding:0;counter-reset:fa-n;}
.fa-next li{
  counter-increment:fa-n;position:relative;padding:0 0 26px 62px;
  border-left:1px solid rgba(255,255,255,.18);margin-left:17px;
}
.fa-next li:last-child{border-left-color:transparent;padding-bottom:0;}
.fa-next li::before{
  content:"0" counter(fa-n);position:absolute;left:-17px;top:-2px;
  width:34px;height:34px;border-radius:50%;
  background:var(--fa-navy-deep);border:1px solid var(--fa-cyan);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fa-mono);font-weight:600;font-size:12px;color:var(--fa-cyan);
}
.fa-next h3{font-size:19px;margin-bottom:8px;}
.fa-next p{font-size:16px;margin:0;color:rgba(255,255,255,.8);}

/* ---------- Related links grid (2-up) ---------- */
.fa-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:767px){.fa-grid2{grid-template-columns:1fr;}}

/* ---------- Compliance table on light ---------- */
.fa-table--light th{border-bottom-color:var(--fa-navy);color:var(--fa-cyan-deep);}
.fa-table--light td{border-bottom-color:var(--fa-line);color:var(--fa-body);}
.fa-table--light td:first-child{color:var(--fa-navy);}
.fa-table--light .fa-int{color:var(--fa-cyan-deep);}
.fa-table--light .fa-ref{color:var(--fa-muted);}
@media (max-width:767px){
  .fa-table--light tr{border-bottom:1px solid var(--fa-line);}
}

/* ---------- Pull statement ---------- */
.fa-pull{
  border-left:3px solid var(--fa-cyan);padding:8px 0 8px 28px;margin:36px 0 0;
  font-family:var(--fa-display);font-weight:600;font-size:24px;line-height:1.35;
  letter-spacing:-.01em;color:var(--fa-navy);
}
.fa-sec--navy .fa-pull{color:#fff;}
@media (max-width:767px){.fa-pull{font-size:20px;padding-left:20px;}}

/* ---------- Placeholder flag ---------- */
.fa-todo{
  display:block;margin-top:14px;padding:14px 18px;border:1px dashed var(--fa-due);
  border-radius:var(--fa-radius);background:rgba(242,168,29,.09);
  font-family:var(--fa-mono);font-size:12px;line-height:1.7;letter-spacing:.04em;
  color:#8a5d05;
}
.fa-sec--navy .fa-todo{color:var(--fa-due);background:rgba(242,168,29,.1);}

/* ---------- Mobile nav panel ---------- */
.fa-mobilenav{
  display:none;position:fixed;inset:0;z-index:300;background:var(--fa-navy);
  padding:24px;overflow-y:auto;
}
.fa-mobilenav.is-open{display:block;}
.fa-mobilenav-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;}
.fa-mobilenav-hd button{background:none;border:0;color:#fff;padding:8px;}
.fa-mobilenav a{
  display:block;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--fa-display);font-weight:600;font-size:20px;color:#fff;text-decoration:none;
}
.fa-mobilenav .fa-btn{margin-top:28px;width:100%;text-align:center;}

/* ============================================================
   HOMEPAGE HERO — Everon-style arc + service ring
   Scoped to .fa-hero--home and body.fa-home so no other page
   is affected while this template is being approved.
   ============================================================ */

/* ---------- Transparent-over-hero header (Doc 6 §3) ---------- */
body.fa-home .fa-hdr{
  background:transparent;border-bottom-color:rgba(255,255,255,.16);
  box-shadow:none;transition:background-color 220ms ease,border-color 220ms ease;
}
body.fa-home .fa-hdr .fa-nav a,
body.fa-home .fa-hdr .fa-phone{color:#fff;}
body.fa-home .fa-hdr .fa-nav a:hover{color:var(--fa-cyan);border-bottom-color:var(--fa-cyan);}
body.fa-home .fa-hdr .fa-burger{color:#fff;}
body.fa-home .fa-logo .fa-logo-dark{display:none;}
body.fa-home .fa-logo .fa-logo-light{display:block;}

/* Solid once scrolled past the hero */
body.fa-home .fa-hdr.is-stuck{
  background:var(--fa-paper);border-bottom-color:var(--fa-line);
  box-shadow:0 2px 12px -6px rgba(0,26,107,.18);
}
body.fa-home .fa-hdr.is-stuck .fa-nav a,
body.fa-home .fa-hdr.is-stuck .fa-phone{color:var(--fa-navy);}
body.fa-home .fa-hdr.is-stuck .fa-burger{color:var(--fa-navy);}
body.fa-home .fa-hdr.is-stuck .fa-logo-dark{display:block;}
body.fa-home .fa-hdr.is-stuck .fa-logo-light{display:none;}
.fa-logo .fa-logo-light{display:none;}
.fa-logo img{height:46px;width:auto;}

/* ---------- Hero shell ---------- */
.fa-hero--home{
  position:relative;overflow:hidden;color:#fff;
  padding:128px 0 104px;
  background:
    radial-gradient(1100px 640px at 88% 6%,rgba(42,51,145,.85),transparent 64%),
    linear-gradient(118deg,#000A28 0%,#001A6B 54%,#0B3A86 100%);
}
.fa-hero--home .fa-wrap{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;
}

/* The sweeping arc — a wide dome anchored in the two lower corners of the
   hero. preserveAspectRatio="none" lets it stretch to any viewport width;
   non-scaling-stroke keeps the band a constant thickness while it does.
   Pure SVG, so the LCP element still costs nothing on the network. */
.fa-arc{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.fa-arc svg{position:absolute;inset:0;width:100%;height:100%;}
.fa-arc path{fill:none;vector-effect:non-scaling-stroke;}
.fa-arc .haze{stroke:var(--fa-cyan);stroke-width:210;opacity:.11;filter:blur(30px);}
.fa-arc .band{stroke:var(--fa-cyan);stroke-width:112;opacity:.26;}
.fa-arc .edge{stroke:#7FE0FF;stroke-width:4;opacity:.85;}
.fa-arc .edge2{stroke:var(--fa-cyan);stroke-width:2;opacity:.32;}

/* Faint skyline along the bottom edge — inline SVG, grounds the
   composition the way Everon's photo does at a fraction of the weight. */
.fa-skyline{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:190px;pointer-events:none;opacity:.20;
}
.fa-skyline svg{width:100%;height:100%;display:block;}
.fa-skyline path{fill:#000A28;}

.fa-hero--home h1{font-size:60px;max-width:15ch;margin-bottom:22px;}
.fa-hero--home .fa-lead{color:rgba(255,255,255,.84);max-width:50ch;}
.fa-hero--home .fa-btnrow{margin-top:34px;}
.fa-hero--home .fa-trustrow{margin-top:40px;}

/* Scroll cue, as on the Everon hero */
.fa-scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;
  animation:fa-bob 2.6s ease-in-out infinite;
}
.fa-scrollcue:hover{border-color:var(--fa-cyan);color:var(--fa-cyan);}
@keyframes fa-bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}

/* ---------- Service ring ---------- */
.fa-ring6{
  --r:186px;
  position:relative;width:100%;max-width:470px;aspect-ratio:1;margin:0 auto;
}
.fa-ring6-track{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.fa-ring6-track .trk{fill:none;stroke:rgba(126,201,235,.26);stroke-width:2;}
.fa-ring6-track .trk2{fill:none;stroke:rgba(126,201,235,.12);stroke-width:1;}
.fa-ring6-track .hi{
  fill:none;stroke:var(--fa-cyan);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:150 1000;stroke-dashoffset:0;
  transform:rotate(var(--arc,-120deg));transform-origin:50% 50%;
  transition:transform 420ms cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 10px rgba(62,190,224,.85));
}
.fa-ring6-glow{
  position:absolute;inset:16%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(62,190,224,.26) 0%,rgba(62,190,224,.07) 48%,transparent 70%);
}

.fa-ring6-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:47%;height:47%;border-radius:50%;
  background:linear-gradient(150deg,#032264 0%,#001348 100%);
  border:1px solid rgba(126,201,235,.34);
  box-shadow:0 0 0 12px rgba(62,190,224,.07),0 26px 60px -22px rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;padding:9%;
}
.fa-ring6-core img{width:100%;height:auto;}

/* Fallback lockup. The reverse logo contains some near-navy shapes (#021f68);
   if they disappear against the dark core, add fa-ring6-core--paper to the
   core div and swap the img to /assets/logo.png. Nothing else changes. */
.fa-ring6-core--paper{
  background:var(--fa-paper);
  border-color:rgba(255,255,255,.6);
  box-shadow:0 0 0 12px rgba(62,190,224,.14),0 26px 60px -22px rgba(0,0,0,.7);
  padding:11%;
}

/* Nodes sit on the ring: rotate out to the radius, then counter-rotate
   so the chip itself stays upright. */
.fa-node6{
  position:absolute;left:50%;top:50%;
  transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  text-decoration:none;color:#fff;
}
.fa-node6 i{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:rgba(0,19,72,.9);border:1px solid rgba(126,201,235,.42);
  display:flex;align-items:center;justify-content:center;
  transition:border-color 200ms ease,background-color 200ms ease,box-shadow 200ms ease;
}
.fa-node6 i svg{width:21px;height:21px;stroke:var(--fa-cyan);fill:none;stroke-width:1.7;}
.fa-node6 span{
  font-family:var(--fa-mono);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
  transition:color 200ms ease;
}
.fa-node6--left{flex-direction:row-reverse;}
.fa-node6:hover i,.fa-node6:focus-visible i{
  background:var(--fa-cyan);border-color:var(--fa-cyan);
  box-shadow:0 0 22px rgba(62,190,224,.55);
}
.fa-node6:hover i svg,.fa-node6:focus-visible i svg{stroke:var(--fa-navy);}
.fa-node6:hover span,.fa-node6:focus-visible span{color:#fff;}

.fa-ring6-cap{
  position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);
  font-family:var(--fa-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fa-cyan);white-space:nowrap;
}

/* ---------- Hero responsive ---------- */
@media (max-width:1200px){
  .fa-hero--home h1{font-size:52px;}
  .fa-ring6{--r:164px;max-width:420px;}
  .fa-node6 span{font-size:10px;letter-spacing:.09em;}
}
@media (max-width:1024px){
  .fa-hero--home{padding:104px 0 88px;}
  .fa-hero--home .fa-wrap{grid-template-columns:1fr;gap:56px;}
  .fa-hero--home h1{font-size:46px;max-width:20ch;}
  .fa-arc .band{stroke-width:88;}
  .fa-arc .haze{stroke-width:150;}
  .fa-skyline{height:140px;opacity:.14;}
}
@media (max-width:767px){
  .fa-hero--home{padding:80px 0 72px;}
  .fa-hero--home h1{font-size:36px;}
  .fa-scrollcue{display:none;}
  .fa-skyline{display:none;}
  /* Ring collapses to a medallion above a chip grid */
  .fa-ring6{aspect-ratio:auto;max-width:none;}
  .fa-ring6-track,.fa-ring6-glow,.fa-ring6-cap{display:none;}
  .fa-ring6-core{
    position:static;transform:none;width:150px;height:150px;
    margin:0 auto 26px;padding:20px;
  }
  .fa-ring6-nodes{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .fa-node6{position:static;transform:none;flex-direction:row;gap:9px;}
  .fa-node6 i{width:38px;height:38px;}
  .fa-node6 i svg{width:18px;height:18px;}
}
@media (max-width:420px){
  .fa-ring6-nodes{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .fa-scrollcue{animation:none;}
  .fa-ring6-track .hi{transition:none;}
}

/* ============================================================
   HOMEPAGE REVISION 2 — all rules scoped to body.fa-home
   ============================================================ */

:root{
  /* Red for the ring labels and the customer-login links. #FF6F61 rather
     than the design system's Status Overdue #D0342C: overdue red only
     reaches 3.1:1 on hero navy and fails AA at these small mono sizes,
     where this clears 5.66:1. Overdue red stays reserved for the
     compliance table so the alert signal is not diluted. */
  --fa-red:#FF6F61;
  --fa-red-deep:#C0392B;
}

/* ---------- Bigger lockups ---------- */
body.fa-home .fa-logo img{height:74px;}
body.fa-home .fa-hdr .fa-wrap{height:104px;}
body.fa-home .fa-hdr.is-stuck .fa-logo img{height:60px;}
body.fa-home .fa-hdr.is-stuck .fa-wrap{height:88px;}
body.fa-home .fa-hdr .fa-wrap,
body.fa-home .fa-logo img{transition:height 220ms ease;}

/* ---------- Hero: real Albany photography ---------- */
.fa-photo{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  background:url("albany.jpg") center 38% / cover no-repeat;
  opacity:.42;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.85) 34%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.85) 34%,transparent 100%);
}
.fa-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#000A28 4%,rgba(0,26,107,.72) 46%,rgba(0,26,107,.30) 100%);
}
.fa-hero--home .fa-skyline{display:none;}

/* ---------- Service ring, enlarged ---------- */
body.fa-home .fa-ring6{--r:196px;max-width:520px;}
body.fa-home .fa-ring6-core{
  width:58%;height:58%;padding:5%;
  box-shadow:0 0 0 14px rgba(62,190,224,.08),0 30px 70px -22px rgba(0,0,0,.75);
}

/* Red service labels, per request */
body.fa-home .fa-node6 span{
  color:var(--fa-red);font-size:12px;letter-spacing:.1em;
  text-shadow:0 1px 8px rgba(0,10,40,.85);
}
body.fa-home .fa-node6:hover span,
body.fa-home .fa-node6:focus-visible span{color:#FF9A8C;}
body.fa-home .fa-node6 i{
  width:52px;height:52px;
  background:rgba(0,10,40,.88);border-color:rgba(126,201,235,.5);
}
body.fa-home .fa-node6 i svg{width:24px;height:24px;}

/* ---------- Customer login links in red ---------- */
body.fa-home .fa-login a{
  color:var(--fa-red);border-color:rgba(255,111,97,.5);
}
body.fa-home .fa-login a:hover{background:var(--fa-red);color:#fff;}

/* ---------- Footer lockup replaces the typographic wordmark ---------- */
.fa-ft-logo{display:none;}
body.fa-home .fa-ft-logo{display:block;width:250px;max-width:100%;height:auto;margin-bottom:4px;}
body.fa-home .fa-ft-word{display:none;}

/* ---------- Less boxed. Cards become ruled columns. ---------- */
body.fa-home .fa-open .fa-card{
  background:none;border:0;border-radius:0;padding:26px 0 0;
  border-top:2px solid rgba(62,190,224,.55);box-shadow:none;
}
body.fa-home .fa-open .fa-card:hover{transform:none;box-shadow:none;}
body.fa-home .fa-open .fa-ico{
  width:auto;height:auto;background:none;border:0;margin-bottom:18px;
}
body.fa-home .fa-open .fa-ico svg{width:30px;height:30px;stroke:var(--fa-cyan-deep);}

@media (max-width:1200px){
  body.fa-home .fa-ring6{--r:172px;max-width:450px;}
  body.fa-home .fa-node6 span{font-size:11px;}
}
@media (max-width:1024px){
  body.fa-home .fa-logo img{height:56px;}
  body.fa-home .fa-hdr .fa-wrap{height:88px;}
  .fa-photo{height:52%;opacity:.34;}
}
@media (max-width:767px){
  body.fa-home .fa-logo img{height:42px;}
  body.fa-home .fa-hdr .fa-wrap{height:70px;}
  body.fa-home .fa-ring6-core{width:170px;height:170px;padding:16px;}
  body.fa-home .fa-node6 i{width:40px;height:40px;}
  body.fa-home .fa-node6 i svg{width:19px;height:19px;}
  .fa-photo{height:44%;opacity:.28;}
}

/* ============================================================
   HOMEPAGE REVISION 3 — larger lockups, wider ring
   ============================================================ */

/* Header lockup up another ~100px of visual weight. The bar grows with it
   so the logo is not cramped, then both shrink on scroll. */
body.fa-home .fa-logo img{height:96px;}
body.fa-home .fa-hdr .fa-wrap{height:128px;}
body.fa-home .fa-hdr.is-stuck .fa-logo img{height:76px;}
body.fa-home .fa-hdr.is-stuck .fa-wrap{height:104px;}

/* Give the ring column the width the larger medallion needs. */
body.fa-home .fa-hero--home .fa-wrap{grid-template-columns:0.95fr 1.05fr;}
body.fa-home .fa-hero--home h1{font-size:56px;}

/* Ring 520 -> 600, and the core takes a larger share of it with less
   padding, so the lockup inside gains roughly 100px of width. */
body.fa-home .fa-ring6{--r:225px;max-width:600px;}
body.fa-home .fa-ring6-core{width:64%;height:64%;padding:3%;}

/* Footer lockup 250 -> 350. */
body.fa-home .fa-ft-logo{width:350px;}

/* The photo is a wider, higher-resolution skyline now, so it can sit a
   little taller and a little stronger without going soft. */
body.fa-home .fa-photo{height:66%;opacity:.46;background-position:center 46%;}

@media (max-width:1200px){
  body.fa-home .fa-logo img{height:80px;}
  body.fa-home .fa-hdr .fa-wrap{height:112px;}
  body.fa-home .fa-hero--home h1{font-size:48px;}
  body.fa-home .fa-ring6{--r:196px;max-width:520px;}
}
@media (max-width:1024px){
  body.fa-home .fa-hero--home .fa-wrap{grid-template-columns:1fr;}
  body.fa-home .fa-logo img{height:62px;}
  body.fa-home .fa-hdr .fa-wrap{height:92px;}
  body.fa-home .fa-ft-logo{width:300px;}
  body.fa-home .fa-photo{height:54%;opacity:.36;}
}
@media (max-width:767px){
  body.fa-home .fa-logo img{height:46px;}
  body.fa-home .fa-hdr .fa-wrap{height:74px;}
  body.fa-home .fa-ring6-core{width:200px;height:200px;padding:14px;}
  body.fa-home .fa-ft-logo{width:250px;}
  body.fa-home .fa-photo{height:46%;opacity:.30;}
}

/* ============================================================
   HOMEPAGE REVISION 4
   Grey lockup on dark, navy header, orbiting ring,
   liquid-glass buttons, brand strip, cyan card hover.
   ============================================================ */

/* ---------- Lockups: grey on dark, everywhere ---------- */
body.fa-home .fa-logo img{height:112px;}
body.fa-home .fa-hdr .fa-wrap{height:148px;}
body.fa-home .fa-hdr.is-stuck .fa-logo img{height:84px;}
body.fa-home .fa-hdr.is-stuck .fa-wrap{height:112px;}

/* The header no longer turns white. The grey lockup is built for dark,
   so the bar just deepens and tightens on scroll. */
body.fa-home .fa-hdr.is-stuck{
  background:rgba(0,10,40,.94);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
          backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(126,201,235,.22);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
body.fa-home .fa-hdr.is-stuck .fa-nav a,
body.fa-home .fa-hdr.is-stuck .fa-phone,
body.fa-home .fa-hdr.is-stuck .fa-burger{color:#fff;}
body.fa-home .fa-hdr.is-stuck .fa-nav a:hover{color:var(--fa-cyan);border-bottom-color:var(--fa-cyan);}
body.fa-home .fa-hdr.is-stuck .fa-logo-dark{display:none;}
body.fa-home .fa-hdr.is-stuck .fa-logo-light{display:block;}

body.fa-home .fa-ft-logo{width:420px;}

/* ---------- Ring: continuous orbit ---------- */
/* --spin is driven by requestAnimationFrame in home.js. Nodes rotate out
   to the radius and counter-rotate by the same amount, so the chips stay
   upright while the ring turns. */
body.fa-home .fa-node6{
  transform:
    rotate(calc(var(--a) + var(--spin, 0deg)))
    translate(var(--r))
    rotate(calc(-1 * (var(--a) + var(--spin, 0deg))))
    translate(-50%,-50%);
}
body.fa-home .fa-ring6-track{
  transform:rotate(var(--spin, 0deg));
  transform-origin:50% 50%;
}
/* Counter-rotate the highlight so it still points at its node. */
body.fa-home .fa-ring6-track .hi{
  transform:rotate(var(--arc,-118deg));
}
body.fa-home .fa-ring6-core{
  width:66%;height:66%;padding:2.5%;
  background:radial-gradient(circle at 50% 40%,#0A2A6E 0%,#000B2E 78%);
}
body.fa-home .fa-ring6-core img{width:100%;height:auto;}

/* ---------- Liquid glass buttons ---------- */
/* Glass needs something behind it to refract. These read best over the
   hero photo and over the navy sections; on flat white they fall back to
   a tinted cyan fill, which is why the fallback colour is set first. */
.fa-btn--liquid{
  position:relative;isolation:isolate;overflow:hidden;
  background:rgba(62,190,224,.22);
  color:#fff;border:0;border-radius:999px;
  padding:18px 34px;
  -webkit-backdrop-filter:blur(9px) saturate(165%);
          backdrop-filter:blur(9px) saturate(165%);
  box-shadow:
    0 2px 8px rgba(0,0,0,.16),
    inset 3px 3px 0.5px -3px rgba(255,255,255,.92),
    inset -3px -3px 0.5px -3px rgba(255,255,255,.80),
    inset 1px 1px 1px -.5px rgba(255,255,255,.55),
    inset -1px -1px 1px -.5px rgba(255,255,255,.55),
    inset 0 0 7px 7px rgba(255,255,255,.10),
    inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 14px rgba(62,190,224,.30);
  transition:transform 260ms cubic-bezier(.2,.8,.2,1),
             box-shadow 260ms ease, background-color 260ms ease;
}
.fa-btn--liquid::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  /* Sheen peak was .26, which lightened the top of the button to rgb(98,127,186)
     and dropped the white label to 3.98:1 — under the 4.5 this 16px/600 text
     needs. Below the gradient's 46% stop it was already 7.4:1, so the failure
     was only along the top edge, which is exactly where a glass highlight is
     brightest and easiest to miss by eye. .16 keeps the highlight and clears
     the threshold. */
  background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 46%);
  pointer-events:none;
}
.fa-btn--liquid:hover{
  transform:scale(1.035);
  background:rgba(62,190,224,.34);
  box-shadow:
    0 6px 18px rgba(0,0,0,.20),
    inset 3px 3px 0.5px -3px rgba(255,255,255,.95),
    inset -3px -3px 0.5px -3px rgba(255,255,255,.85),
    inset 0 0 8px 8px rgba(255,255,255,.13),
    0 0 26px rgba(62,190,224,.48);
}
.fa-btn--liquid:active{transform:scale(.985);}
.fa-btn--liquid:focus-visible{outline:3px solid var(--fa-cyan);outline-offset:3px;}

/* On light grounds the glass has nothing to refract, so it becomes a
   solid cyan button with navy text — the design system's primary. */
.fa-sec:not(.fa-sec--navy) .fa-btn--liquid{
  background:var(--fa-cyan);color:var(--fa-navy);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:
    inset 2px 2px 0.5px -2px rgba(255,255,255,.95),
    inset -2px -2px 0.5px -2px rgba(0,26,107,.25),
    0 6px 18px -8px rgba(18,104,160,.55);
}
.fa-sec:not(.fa-sec--navy) .fa-btn--liquid:hover{
  background:#5BD0EC;color:var(--fa-navy);
}

/* ---------- Brand strip ---------- */
.fa-brands{
  position:relative;overflow:hidden;margin-top:40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.fa-brands-track{
  display:flex;align-items:center;gap:76px;width:max-content;
  animation:fa-marquee 42s linear infinite;
}
.fa-brands:hover .fa-brands-track,
.fa-brands:focus-within .fa-brands-track{animation-play-state:paused;}
@keyframes fa-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.fa-brand{
  flex:0 0 auto;height:62px;display:flex;align-items:center;justify-content:center;
  opacity:.82;transition:opacity 200ms ease;
}
.fa-brand:hover{opacity:1;}
.fa-brand img{max-height:52px;width:auto;}
.fa-brand-name{
  font-family:var(--fa-display);font-weight:700;font-size:26px;
  letter-spacing:.01em;color:rgba(255,255,255,.62);white-space:nowrap;
}
.fa-brand-name small{
  display:block;font-family:var(--fa-mono);font-weight:500;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fa-due);margin-top:3px;
}
@media (max-width:767px){
  .fa-brands-track{gap:44px;animation-duration:30s;}
  .fa-brand{height:48px;}
  .fa-brand img{max-height:38px;}
  .fa-brand-name{font-size:20px;}
}

/* ---------- Six-system cards: cyan on hover ---------- */
body.fa-home .fa-open .fa-card{
  transition:border-color 220ms ease,transform 220ms ease;
}
body.fa-home .fa-open .fa-card:hover{
  border-top-color:var(--fa-cyan);
  transform:translateY(-3px);
}
body.fa-home .fa-open .fa-card:hover h3,
body.fa-home .fa-open .fa-card:hover .fa-textlink{color:var(--fa-cyan-deep);}
body.fa-home .fa-open .fa-card:hover .fa-ico svg{stroke:var(--fa-cyan);}
body.fa-home .fa-open .fa-card h3,
body.fa-home .fa-open .fa-card .fa-textlink,
body.fa-home .fa-open .fa-ico svg{transition:color 220ms ease,stroke 220ms ease;}

@media (max-width:1200px){
  body.fa-home .fa-logo img{height:92px;}
  body.fa-home .fa-hdr .fa-wrap{height:126px;}
}
@media (max-width:1024px){
  body.fa-home .fa-logo img{height:70px;}
  body.fa-home .fa-hdr .fa-wrap{height:100px;}
  body.fa-home .fa-ft-logo{width:340px;}
}
@media (max-width:767px){
  body.fa-home .fa-logo img{height:50px;}
  body.fa-home .fa-hdr .fa-wrap{height:78px;}
  body.fa-home .fa-ft-logo{width:280px;}
  .fa-btn--liquid{padding:15px 26px;}
  /* Ring is a static grid on mobile, so the orbit is switched off. */
  body.fa-home .fa-node6{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .fa-brands-track{animation:none;}
  .fa-btn--liquid{transition:none;}
  .fa-btn--liquid:hover{transform:none;}
}

/* ============================================================
   SITE-WIDE ROLLOUT
   Decisions approved on the homepage, applied to all 49 pages.
   Hero-specific work (arc, orbiting ring, photo, brand strip)
   stays scoped to body.fa-home.
   ============================================================ */

/* The grey lockup is the mark for every dark ground, on every page. */
.fa-ft-logo{display:block;width:300px;max-width:100%;height:auto;margin-bottom:4px;}
.fa-ft-word{display:none;}
body.fa-home .fa-ft-logo{width:420px;}

/* Primary buttons sitting on a dark ground take the glass treatment.
   One rule rather than a class on every call site — and because it keys
   off context, a button moved to a light section corrects itself. */
.fa-sec--navy .fa-btn--primary,
.fa-hero .fa-btn--primary{
  position:relative;isolation:isolate;overflow:hidden;
  background:rgba(62,190,224,.22);color:#fff;border:0;border-radius:999px;
  -webkit-backdrop-filter:blur(9px) saturate(165%);
          backdrop-filter:blur(9px) saturate(165%);
  box-shadow:
    0 2px 8px rgba(0,0,0,.16),
    inset 3px 3px 0.5px -3px rgba(255,255,255,.92),
    inset -3px -3px 0.5px -3px rgba(255,255,255,.80),
    inset 1px 1px 1px -.5px rgba(255,255,255,.55),
    inset -1px -1px 1px -.5px rgba(255,255,255,.55),
    inset 0 0 7px 7px rgba(255,255,255,.10),
    0 0 14px rgba(62,190,224,.30);
  transition:transform 260ms cubic-bezier(.2,.8,.2,1),
             box-shadow 260ms ease, background-color 260ms ease;
}
.fa-sec--navy .fa-btn--primary:hover,
.fa-hero .fa-btn--primary:hover{
  transform:scale(1.035);background:rgba(62,190,224,.34);
  box-shadow:0 6px 18px rgba(0,0,0,.20),
    inset 3px 3px 0.5px -3px rgba(255,255,255,.95),
    inset 0 0 8px 8px rgba(255,255,255,.13),
    0 0 26px rgba(62,190,224,.48);
}
.fa-sec--navy .fa-btn--primary:focus-visible,
.fa-hero .fa-btn--primary:focus-visible{outline:3px solid var(--fa-cyan);outline-offset:3px;}

/* Interior page heroes are navy, so their submit and CTA buttons inherit
   the same treatment through .fa-hero above. Light sections keep the solid
   cyan-fill primary, which is the accessible default at 7.09:1. */

@media (prefers-reduced-motion:reduce){
  .fa-sec--navy .fa-btn--primary,
  .fa-hero .fa-btn--primary{transition:none;}
  .fa-sec--navy .fa-btn--primary:hover,
  .fa-hero .fa-btn--primary:hover{transform:none;}
}

/* ============================================================
   MANUFACTURER LOGOS AND PDK MEDIA
   Added during the WordPress build. Everything above this line
   is the original stylesheet.
   ============================================================ */

/* ---------- Real manufacturer logos in the brand strip ----------
   The marquee dims its tiles to .82 so the named placeholders sit
   back from the copy. That must not apply to a real logo: the
   Aiphone Image & Collateral Use Agreement §3(d) forbids
   transparencies, overlays, and any other effect that changes a
   logo's appearance. Logo tiles therefore render at full opacity
   in both states, and object-fit:contain guarantees the aspect
   ratio is never altered (§3(e)).
   Height floor: §3(f) sets a minimum logo height of 1/4 inch
   (~24px at 96dpi). The 52px/38px caps below stay well clear. */
.fa-brand--logo{opacity:1;}
.fa-brand--logo:hover{opacity:1;}
.fa-brand--logo img{max-height:52px;min-height:26px;width:auto;object-fit:contain;}
@media (max-width:767px){
  .fa-brand--logo img{max-height:38px;}
}

/* ---------- White plates behind manufacturer logos ----------
   Every supplied logo file is dark artwork intended for a light ground, and
   two of them (Fire-Lite, CDVI) carry an opaque white background rather than
   transparency. Dropped straight onto the navy strip they read as white
   rectangles. Recolouring them is not an option — Aiphone §3(d) forbids it and
   the other marks carry equivalent terms — so the ground changes instead of
   the artwork. The plate is a background, not an overlay: nothing is drawn on
   top of any logo, and object-fit:contain still guarantees aspect ratio. */
.fa-brand--logo{
  background:#fff;
  border-radius:12px;
  padding:12px 22px;
  /* One plate height for every tile, so the row of cards reads as a set
     rather than a ragged edge — the stacked lockup is the tallest at
     12 + 64 + 12, and the wordmarks pad out to match. */
  height:auto;
  min-height:88px;
  box-sizing:border-box;
  /* No shadow and no border, deliberately. Luminys forbids "adding effects
     like drop shadows or strokes" and Aiphone §3(d) forbids any effect that
     changes a logo's appearance. Both are aimed at the artwork rather than a
     container, but a plain white rectangle is unambiguously just a background
     and costs nothing to prefer. The plates read fine on navy without it. */
}
.fa-brand--tall img{max-height:64px;}

@media (max-width:767px){
  .fa-brand--logo{padding:9px 15px;border-radius:9px;min-height:64px;}
  .fa-brand--tall img{max-height:46px;}
}

/* ============================================================
   GOLD ACCENT
   ============================================================
   The site measured 48% white sections, 35% sky and 17% navy — 83% of it
   white or pale blue, and every saturated colour in the palette (navy,
   cyan, sky) is cool. There was no warm note anywhere.

   Gold rather than an invented colour, for three reasons:
     1. It is already a design-system token (--fa-due, Status Due), so this
        promotes an existing value rather than adding to the palette.
     2. Gold sits opposite navy on the wheel — maximum separation without
        the clash a red or green would bring against a fire-safety context.
     3. Amber is native to the trade. It is the supervisory and trouble
        colour on every fire alarm panel in the buildings this site is
        selling into.

   Deliberately NOT applied as a header or footer fill. Gold works because
   it is rare; spread across two large persistent areas it stops signalling
   anything, and a gold header would fight the navy logo on every page. It
   is spent on the primary action instead, plus two thin structural edges.

   Contrast, measured against #001A6B navy:
     #F2A81D on navy ....... 7.64:1   (button fill / footer headings)
     navy on #F2A81D ....... 7.64:1   (button label)
     navy on #FFC04D ....... 9.6:1    (hover state)
   ============================================================ */
:root{
  --fa-gold:#F2A81D;
  --fa-gold-hover:#FFC04D;
}

/* Primary action, one colour everywhere.
   Previously this was translucent cyan glass on dark grounds and solid cyan
   on light ones — two different primary colours depending on the section
   behind it, and the dark version was the weaker of the two (it needed a
   sheen reduction earlier just to clear 4.5:1). Solid gold on both grounds
   gives the site a single, unmistakable action colour. */
.fa-btn--liquid,
.fa-sec:not(.fa-sec--navy) .fa-btn--liquid{
  background:var(--fa-gold);
  color:var(--fa-navy);
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
}
/* The glass sheen was there to lift a translucent fill. A solid fill does
   not need it, and it only cost contrast at the top edge. */
.fa-btn--liquid::before{background:none;}

/* On a white or sky ground the gold fill is only 2.02:1 against the page,
   under the 3:1 WCAG 1.4.11 wants for the visual boundary of a control. A
   darker gold edge takes that to about 4:1 without changing the button's
   colour.
   Applied by default and removed on dark grounds, rather than the reverse:
   scoping it to `.fa-sec:not(.fa-sec--navy)` missed every hero button,
   because `.fa-hero` is not a `.fa-sec`. Opting out of the known-dark cases
   is the safer direction — a ground added later inherits the accessible
   default instead of silently losing it. */
.fa-btn--liquid{border:1px solid #A8710A;}
.fa-hero .fa-btn--liquid,
.fa-sec--navy .fa-btn--liquid{border-color:transparent;}

.fa-btn--liquid:hover,
.fa-sec:not(.fa-sec--navy) .fa-btn--liquid:hover{
  background:var(--fa-gold-hover);
  color:var(--fa-navy);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.5);
}

/* Two structural edges — enough to register as a brand colour at the top and
   bottom of every page without becoming a slab of it. */
.fa-hdr.is-stuck{border-bottom:2px solid var(--fa-gold);}
.fa-ft{border-top:3px solid var(--fa-gold);}
.fa-ft h2{color:var(--fa-gold);}

/* Lines carried as text rather than as logo tiles. Sits on the navy brand
   ground, so it needs the same light treatment the eyebrow gets. */
.fa-brands-foot{
  margin:26px auto 0;max-width:70ch;text-align:center;
  color:rgba(255,255,255,.84);font-size:16px;line-height:1.65;
}
@media (max-width:767px){
  .fa-brands-foot{font-size:15px;margin-top:20px;}
}

/* Attribution line required by the Aiphone agreement §4. */
.fa-attribution{
  margin-top:22px;text-align:center;
  font-family:var(--fa-mono);font-size:11px;letter-spacing:.06em;
  color:rgba(255,255,255,.45);
}

/* ---------- Media band: image or video beside copy ---------- */
.fa-media{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.fa-media--flip .fa-media-figure{order:2;}
.fa-media-figure{margin:0;position:relative;}
.fa-media-figure img,
.fa-media-figure video{
  display:block;width:100%;height:auto;border-radius:var(--fa-radius,4px);
}
.fa-media-figure figcaption{
  margin-top:10px;font-family:var(--fa-mono);font-size:11px;
  letter-spacing:.06em;color:var(--fa-muted);
}
.fa-sec--navy .fa-media-figure figcaption{color:rgba(255,255,255,.5);}
@media (max-width:900px){
  .fa-media{grid-template-columns:1fr;gap:32px;}
  .fa-media--flip .fa-media-figure{order:0;}
}

/* ---------- Product gallery ---------- */
.fa-gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;
}
.fa-gallery figure{
  margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.fa-gallery img{
  display:block;width:100%;max-width:220px;height:auto;object-fit:contain;
}
.fa-gallery figcaption{
  margin-top:12px;font-family:var(--fa-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fa-muted);
}
.fa-sec--navy .fa-gallery figcaption{color:rgba(255,255,255,.6);}

/* ---------- Post content ----------
   The editor outputs raw markup with no classes, so it inherits none of the
   design's typography. Per 14-blog.md §3 these rules are written once, against
   a post containing every element, rather than discovered one at a time over
   six months. Body copy is capped at 72ch — full-width body text at 1200px is
   the most common thing wrong with WordPress blogs built in page builders. */
.fa-post{max-width:72ch;margin:0 auto;}
.fa-post > *{max-width:72ch;}
.fa-post h2{font-family:var(--fa-display);font-weight:700;font-size:30px;line-height:1.2;margin:44px 0 14px;}
.fa-post h3{font-family:var(--fa-display);font-weight:700;font-size:22px;line-height:1.3;margin:32px 0 10px;}
.fa-post p{font-size:17px;line-height:1.75;margin:0 0 20px;}
.fa-post ul,.fa-post ol{font-size:17px;line-height:1.75;margin:0 0 20px;padding-left:22px;}
.fa-post li{margin-bottom:8px;}
.fa-post a{color:var(--fa-cyan-deep);text-decoration:underline;text-underline-offset:2px;}
.fa-post blockquote{
  margin:28px 0;padding-left:20px;border-left:3px solid var(--fa-cyan);
  font-size:20px;line-height:1.55;
}
.fa-post blockquote p{font-size:inherit;line-height:inherit;}
.fa-post img{max-width:100%;height:auto;border-radius:var(--fa-radius);}
.fa-post figure{margin:28px 0;}
.fa-post figcaption{
  margin-top:8px;font-family:var(--fa-mono);font-size:11px;
  letter-spacing:.06em;color:var(--fa-muted);
}
.fa-post hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:36px 0;}
.fa-post code{font-family:var(--fa-mono);font-size:14px;}

/* Archive pagination */
.fa-sec .navigation.pagination{margin-top:48px;}
.fa-sec .nav-links{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  font-family:var(--fa-mono);font-size:13px;letter-spacing:.04em;
}
.fa-sec .nav-links .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border:1px solid rgba(0,0,0,.14);color:var(--fa-navy);text-decoration:none;
}
.fa-sec .nav-links .page-numbers:hover{border-color:var(--fa-cyan-deep);}
.fa-sec .nav-links .page-numbers.current{
  background:var(--fa-navy);border-color:var(--fa-navy);color:#fff;
}

/* Visually hidden text, used to give repeated "Read →" links a unique name. */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Stacked navy bands ----------
   The build's rhythm rule is that no two navy sections sit next to each other,
   and 48 of the 49 pages honour it. Two cannot:

     /request-a-site-survey/  navy hero -> navy CTA band
     any page whose last content section is navy, before the CTA

   Both are what the copy documents specify, so the grounds are left alone.
   What was missing is any seam between them: --fa-navy is flat, the hero's
   radial glow has faded out by its lower edge, and the join reads as one
   1,500px slab with two headings floating in it.

   A hairline at the join restores the band boundary without changing a single
   ground. It is deliberately faint — a divider, not a border. */
.fa-hero--page + .fa-sec--navy,
.fa-sec--navy + .fa-sec--navy{
  border-top:1px solid rgba(255,255,255,.14);
}

/* ---------- WPForms mapped onto the design ----------
   Per 06-form-wpforms-lite.md §3: the form's CSS class is `fa-form`, which
   WPForms puts on its CONTAINER (.wpforms-container), not on the <form>. These
   rules map WPForms' own wrappers onto the .fa-field / .fa-check treatment so
   the plugin's markup matches the hand-built form it replaces.

   Set WPForms → Settings → General → Include Form Styling to "Base styling
   only" so the plugin's full stylesheet does not fight these.

   Note: WPForms renders an aria-hidden honeypot field that looks like a normal
   text field. Every selector below excludes it, or it shows up as a stray
   input in the middle of the form. */

.wpforms-container.fa-form{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--fa-radius-card);
  padding:36px;margin:0;
}
.fa-form .wpforms-form{margin:0;}
.fa-form .wpforms-field{margin:0 0 18px;padding:0;}

/* The honeypot. Hidden properly rather than left to look like a real field. */
.fa-form .wpforms-field[data-field-type="text"] input[aria-hidden="true"],
.fa-form .wpforms-field label[aria-hidden="true"]{
  position:absolute !important;left:-9999px !important;
}

.fa-form .wpforms-field-label,
.fa-form .wpforms-field legend.wpforms-field-label{
  display:block;font-family:var(--fa-sans);font-weight:500;font-size:15px;
  color:#fff;margin:0 0 7px;padding:0;float:none;
}
.fa-form .wpforms-required-label{color:var(--fa-cyan);}
.fa-form .wpforms-field-sublabel{
  font-family:var(--fa-mono);font-size:11px;letter-spacing:.05em;
  color:rgba(255,255,255,.55);
}

.fa-form input[type="text"],
.fa-form input[type="email"],
.fa-form input[type="tel"],
.fa-form input[type="url"],
.fa-form input[type="number"],
.fa-form select,
.fa-form textarea{
  width:100%;height:52px;padding:0 16px;background:#fff;
  border:1px solid var(--fa-line);border-radius:var(--fa-radius);
  font-family:var(--fa-sans);font-size:16px;color:var(--fa-body);
  box-shadow:none;max-width:none;
}
.fa-form textarea{height:auto;min-height:120px;padding:14px 16px;}

.fa-form select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232B3A42' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}

/* Checkboxes become the design's pill row. */
.fa-form .wpforms-field-checkbox fieldset{border:0;margin:0;padding:0;}
.fa-form .wpforms-field-checkbox ul{
  display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 0;padding:0;list-style:none;
}
.fa-form .wpforms-field-checkbox li{margin:0;}
.fa-form .wpforms-field-checkbox li label{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--fa-radius);
  font-family:var(--fa-mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.85);cursor:pointer;
  margin:0;transition:border-color 160ms ease,background-color 160ms ease;
}
.fa-form .wpforms-field-checkbox li label:hover{
  border-color:var(--fa-cyan);background:rgba(62,190,224,.14);
}
.fa-form .wpforms-field-checkbox li input[type="checkbox"]{
  accent-color:var(--fa-cyan-deep);width:15px;height:15px;margin:0;
}

/* Submit takes the liquid button treatment, full width. */
.fa-form .wpforms-submit-container{padding:0;margin-top:10px;}
.fa-form button.wpforms-submit,
.fa-form input.wpforms-submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:0 26px;
  background:var(--fa-cyan);border:2px solid transparent;border-radius:var(--fa-radius);
  font-family:var(--fa-mono);font-weight:600;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fa-navy);
  cursor:pointer;transition:background-color 160ms ease,transform 160ms ease;
}
.fa-form button.wpforms-submit:hover,
.fa-form input.wpforms-submit:hover{background:#fff;}
.fa-form button.wpforms-submit:focus-visible,
.fa-form input.wpforms-submit:focus-visible{outline:3px solid var(--fa-cyan);outline-offset:3px;}

/* Validation and confirmation, on the navy ground. */
.fa-form label.wpforms-error{
  display:block;margin-top:6px;font-family:var(--fa-mono);font-size:11px;
  letter-spacing:.05em;color:var(--fa-alert,#FF9A8C);
}
.fa-form input.wpforms-error,
.fa-form select.wpforms-error{border-color:var(--fa-alert,#FF9A8C);}
.fa-form .wpforms-confirmation-container-full,
div.wpforms-confirmation-container-full{
  background:rgba(62,190,224,.14);border:1px solid var(--fa-cyan);
  border-radius:var(--fa-radius);padding:20px;color:#fff;
}

/* The service form sits on a light ground, so its labels take Navy not white
   and the submit is the primary button. Per 06-form-wpforms-lite.md §8. */
.fa-sec:not(.fa-sec--navy) .wpforms-container.fa-form{
  background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.12);
}
.fa-sec:not(.fa-sec--navy) .fa-form .wpforms-field-label,
.fa-sec:not(.fa-sec--navy) .fa-form legend.wpforms-field-label{color:var(--fa-navy);}
.fa-sec:not(.fa-sec--navy) .fa-form .wpforms-field-checkbox li label{
  border-color:rgba(0,0,0,.22);color:var(--fa-body);
}
.fa-sec:not(.fa-sec--navy) .fa-form button.wpforms-submit,
.fa-sec:not(.fa-sec--navy) .fa-form input.wpforms-submit{
  background:var(--fa-navy);color:#fff;
}
.fa-sec:not(.fa-sec--navy) .fa-form button.wpforms-submit:hover,
.fa-sec:not(.fa-sec--navy) .fa-form input.wpforms-submit:hover{
  background:var(--fa-cyan-deep);
}

/* ---------- Legibility fixes on dark grounds ----------
   Two faults, same root cause. Line 72 sets every h1–h4 to --fa-navy, and
   line 73 flips them white only inside .fa-sec--navy.

   1. The hero is .fa-hero, not .fa-sec--navy, so its H1 kept the navy and
      rendered navy-on-navy over the Albany photo — effectively invisible.
      Set to --fa-sky: a very light, slightly cool grey already in the palette.
      Chosen over pure white so it sits against the photo without glare, and
      over a neutral grey so it stays on-brand.

   2. .fa-project is a WHITE card sitting inside the navy section, so its
      heading and body text inherited the section's white — white on white.
      The amber AWAITING flag had the same problem: it is recoloured for the
      navy ground, which fails on the card's white plate.

   Anything on the navy ground itself is untouched. */

.fa-hero h1,
.fa-hero h2{color:var(--fa-sky);}

.fa-sec--navy .fa-project h3{color:var(--fa-navy);}
.fa-sec--navy .fa-project p,
.fa-sec--navy .fa-project .fa-project-body{color:var(--fa-body);}
.fa-sec--navy .fa-project .fa-todo{color:#8a5d05;}