/*
Theme Name: BoreLogix
Theme URI: https://www.borelogix.com/
Author: BoreLogix
Author URI: https://www.borelogix.com/
Description: The BoreLogix block theme — a purpose-built marketing and documentation front for Waterwell IQ, the system of record for water well lifecycle, performance and compliance. Engineered for speed, accessibility (WCAG 2.1 AA) and public-agency procurement.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: borelogix
Tags: full-site-editing, block-patterns, accessibility-ready, wide-blocks, custom-colors, custom-logo, translation-ready
*/

/* ==========================================================================
   0 · SELF-HOSTED FONTS (optional)
   --------------------------------------------------------------------------
   By default the theme loads Saira, IBM Plex Sans and IBM Plex Mono from
   Google Fonts with preconnect. To self-host instead — faster, no third-party
   request, and cleaner for public-agency privacy review — drop the woff2 files
   into /assets/fonts/ and add this to wp-config.php:

       define( 'BORELOGIX_SELF_HOST_FONTS', true );

   The @font-face rules below activate automatically once that constant is set,
   because the Google stylesheet is then never enqueued.
   ========================================================================== */

@font-face{font-family:"Saira";font-style:normal;font-weight:600 800;font-display:swap;
  src:local("Saira"),url("assets/fonts/saira-variable.woff2") format("woff2-variations");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:local("IBM Plex Sans"),url("assets/fonts/plex-sans-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:local("IBM Plex Sans SemiBold"),url("assets/fonts/plex-sans-600.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:local("IBM Plex Mono"),url("assets/fonts/plex-mono-400.woff2") format("woff2");}

/* Metric-matched fallbacks kill layout shift while webfonts load. */
@font-face{font-family:"Saira Fallback";src:local("Arial");
  size-adjust:96%;ascent-override:96%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial");
  size-adjust:101%;ascent-override:94%;descent-override:25%;line-gap-override:0%;}

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */

:root{
  --blx-navy-900:#061229;
  --blx-navy-800:#0A1B3D;
  --blx-navy-700:#12305F;
  --blx-blue-600:#0E63D6;
  --blx-blue-500:#1E86F0;
  --blx-cyan-400:#22B8DC;
  --blx-cyan-300:#6EDDF3;
  --blx-chrome-400:#A9BBD1;
  --blx-chrome-300:#C9D6E6;
  --blx-chrome-200:#E2EAF4;
  --blx-paper:#F5F8FC;
  --blx-white:#FFFFFF;
  --blx-ink:#0B1526;
  --blx-ink-2:#3C5170;
  --blx-ink-3:#697F9C;
  --blx-ok:#12775A;
  --blx-warn:#9A6612;
  --blx-bad:#B03A2E;

  --blx-current:linear-gradient(96deg,#0E63D6 0%,#1E86F0 46%,#39D2EE 100%);
  --blx-rule:rgba(11,21,38,.10);
  --blx-rule-strong:rgba(11,21,38,.17);
  --blx-shadow-card:0 1px 2px rgba(6,18,41,.05),0 10px 28px -14px rgba(6,18,41,.20);
  --blx-shadow-lift:0 2px 6px rgba(6,18,41,.07),0 24px 48px -20px rgba(6,18,41,.28);

  --blx-mark-void:#F5F8FC;
  --blx-header-h:74px;
  --blx-maxw:1220px;
  --blx-radius:8px;

  --blx-font-display:Saira,"Saira Fallback","Segoe UI",system-ui,sans-serif;
  --blx-font-body:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --blx-font-data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--blx-paper);
  color:var(--blx-ink);
  font-family:var(--blx-font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto}
img{border-style:none}

:where(h1,h2,h3,h4,h5,h6){font-family:var(--blx-font-display);text-wrap:balance}
:where(p,li){text-wrap:pretty;overflow-wrap:break-word}
:where(h1,h2,h3,h4){overflow-wrap:break-word}

::selection{background:var(--blx-blue-500);color:#fff}

:focus-visible{
  outline:2px solid var(--blx-blue-500);
  outline-offset:3px;
  border-radius:3px;
}
.blx-deep :focus-visible,
.blx-section--deep :focus-visible{outline-color:var(--blx-cyan-300)}

/* Skip link — required for keyboard and screen-reader users. */
.blx-skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--blx-navy-900);color:#fff;
  padding:.9rem 1.4rem;border-radius:0 0 6px 0;
  font-family:var(--blx-font-display);font-weight:600;font-size:.875rem;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
}
.blx-skip:focus{left:0}

.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal;
}
.screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;position:static}

/* ==========================================================================
   3 · LAYOUT SHELLS
   ========================================================================== */

.blx-wrap{width:100%;max-width:var(--blx-maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem)}
.blx-wrap--narrow{max-width:820px}
.blx-wrap--mid{max-width:1000px}

.blx-section{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.blx-section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.blx-section--paper{background:var(--blx-paper)}
.blx-section--white{background:var(--blx-white)}

.blx-section--deep{
  background:linear-gradient(168deg,#0A1B3D 0%,#061229 62%,#08183A 100%);
  color:var(--blx-chrome-200);
  --blx-mark-void:#0A1B3D;
  --blx-rule:rgba(201,214,230,.16);
  --blx-rule-strong:rgba(201,214,230,.28);
}
.blx-section--deep :where(h1,h2,h3,h4){color:#fff}
.blx-section--deep a{color:var(--blx-cyan-300)}

/* A hairline grid texture that reads as engineering paper, not decoration. */
.blx-section--deep::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(110,221,243,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,221,243,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 78%);
}
.blx-section--deep > *{position:relative;z-index:1}

/* ==========================================================================
   4 · BRAND LOCKUPS
   ========================================================================== */

.blx-lockup{display:inline-flex;align-items:center;gap:.7rem;color:var(--blx-navy-900);text-decoration:none}
.blx-lockup--inverse{color:#fff}
.blx-lockup__text{display:flex;flex-direction:column;gap:.2rem;line-height:1}

.blx-wordmark{
  font-family:var(--blx-font-display);
  font-weight:800;
  font-size:1.32rem;
  letter-spacing:.055em;
  line-height:1;
  color:currentColor;
  white-space:nowrap;
}
.blx-wordmark__x{
  background:var(--blx-current);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* Fallback for the rare engine that ignores background-clip. */
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .blx-wordmark__x{color:var(--blx-blue-500);-webkit-text-fill-color:currentColor}
}

.blx-lockup__tagline{
  font-family:var(--blx-font-display);
  font-size:.5625rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blx-ink-3);display:flex;gap:.5rem;
}
.blx-lockup--inverse .blx-lockup__tagline{color:var(--blx-chrome-400)}
.blx-lockup__tagline i{opacity:.45;font-style:normal}

.blx-mark{flex:none;display:block}

.wwiq-lockup{display:inline-flex;flex-direction:column;gap:.35rem}
.wwiq-lockup__name{font-family:var(--blx-font-display);font-weight:700;letter-spacing:-.01em;line-height:1;
  font-size:1.5rem;color:var(--blx-navy-900);display:inline-flex;align-items:baseline;gap:.4rem}
.wwiq-lockup--inverse .wwiq-lockup__name{color:#fff}
.wwiq-lockup__iq{
  font-weight:800;background:var(--blx-current);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.wwiq-lockup__byline{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blx-ink-3)}
.wwiq-lockup--inverse .wwiq-lockup__byline{color:var(--blx-chrome-400)}

/* ==========================================================================
   5 · SITE HEADER
   ========================================================================== */

.blx-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--blx-rule);
  transition:box-shadow .2s ease,background .2s ease;
}
.blx-header.is-stuck{box-shadow:0 6px 24px -18px rgba(6,18,41,.55)}
@supports not (backdrop-filter:blur(2px)){.blx-header{background:#fff}}

/* On the front page the header floats over the hero until you scroll, then
   lands as the solid bar. The hero is pulled up under it so there is no strip
   of pale background above the dark section.

   The paint order has to be defended in three places, because WordPress puts
   wrappers around a template that a theme cannot fully predict — and a pale
   sliver above a dark hero is the most visible flaw a page can have.

   1. The canvas itself is dark on the front page, so anything that manages to
      show through shows navy rather than paper. This also covers the strip the
      admin bar reserves with `html { margin-top: 32px }` when you are logged in.
   2. The root block wrapper contributes no top padding.
   3. The first block gets no block-gap margin above it. */
body.blx-front{background:var(--blx-navy-800)}

.blx-front .wp-site-blocks{padding-top:0}
.blx-front .wp-site-blocks > *{margin-block-start:0}
.blx-front .wp-site-blocks > *:first-child{margin-top:0}

.blx-front .blx-hero{
  margin-top:calc(var(--blx-header-h) * -1);
  padding-top:calc(var(--blx-header-h) + clamp(3rem,7vw,6rem));
}

/* When logged in, WordPress reserves the top 32px with html{margin-top}. The
   admin bar paints over it, but on a dark hero the seam is visible, so the
   bar is given the hero's own ground. */
.admin-bar.blx-front #wpadminbar{background:var(--blx-navy-900)}
.blx-front .blx-header:not(.is-stuck){
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
.blx-front .blx-header:not(.is-stuck) .blx-lockup{color:#fff;--blx-mark-void:#0A1B3D}
.blx-front .blx-header:not(.is-stuck) .blx-lockup__tagline{color:var(--blx-chrome-400)}
.blx-front .blx-header:not(.is-stuck) .blx-nav__link{color:rgba(226,234,244,.90)}
.blx-front .blx-header:not(.is-stuck) .blx-nav__link:hover,
.blx-front .blx-header:not(.is-stuck) .blx-nav__link:focus-visible{color:#fff;background:rgba(255,255,255,.12)}
.blx-front .blx-header:not(.is-stuck) .blx-burger{background:rgba(255,255,255,.08);border-color:rgba(201,214,230,.34)}
.blx-front .blx-header:not(.is-stuck) .blx-burger span,
.blx-front .blx-header:not(.is-stuck) .blx-burger span::before,
.blx-front .blx-header:not(.is-stuck) .blx-burger span::after{background:#fff}
.blx-front .blx-header:not(.is-stuck) :focus-visible{outline-color:var(--blx-cyan-300)}

.blx-header__inner{
  display:flex;align-items:center;gap:1.5rem;
  min-height:var(--blx-header-h);
  max-width:var(--blx-maxw);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2rem);
}
.blx-site-logo{text-decoration:none;flex:none}

.blx-nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.blx-nav__list{list-style:none;display:flex;align-items:center;gap:.15rem;margin:0;padding:0}
.blx-nav__link{
  display:inline-block;
  font-family:var(--blx-font-display);font-size:.875rem;font-weight:600;letter-spacing:.005em;
  color:var(--blx-ink-2);text-decoration:none;
  padding:.55rem .8rem;border-radius:6px;
  transition:color .15s ease,background .15s ease;
}
.blx-nav__link:hover,.blx-nav__link:focus-visible{color:var(--blx-navy-900);background:var(--blx-chrome-200)}
.blx-nav__link[aria-current="page"]{color:var(--blx-blue-600)}

.blx-nav__cta{margin-left:.6rem}

.blx-burger{
  display:none;margin-left:auto;
  width:44px;height:44px;border:1px solid var(--blx-rule-strong);border-radius:7px;
  background:#fff;cursor:pointer;align-items:center;justify-content:center;
}
.blx-burger span{display:block;width:19px;height:2px;background:var(--blx-navy-900);position:relative}
.blx-burger span::before,.blx-burger span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:var(--blx-navy-900);
  transition:transform .2s ease,top .2s ease}
.blx-burger span::before{top:-6px}
.blx-burger span::after{top:6px}
.blx-burger[aria-expanded="true"] span{background:transparent}
.blx-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.blx-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1120px){
  .blx-burger{display:flex}
  .blx-nav{
    position:fixed;inset:var(--blx-header-h) 0 auto 0;
    background:#fff;border-bottom:1px solid var(--blx-rule);
    flex-direction:column;align-items:stretch;gap:0;
    padding:.75rem clamp(1.25rem,4vw,2rem) 1.5rem;
    max-height:calc(100vh - var(--blx-header-h));overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
    box-shadow:var(--blx-shadow-card);
  }
  .blx-nav.is-open{transform:none;opacity:1;visibility:visible}
  .blx-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .blx-nav__link{padding:.85rem .25rem;border-bottom:1px solid var(--blx-rule);border-radius:0;font-size:1rem}
  .blx-nav__cta{margin:1rem 0 0}
  .blx-nav__cta .blx-btn{width:100%;justify-content:center}
}

/* ==========================================================================
   6 · BUTTONS
   ========================================================================== */

.blx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--blx-font-display);font-size:.8125rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.5rem;border-radius:6px;border:1px solid transparent;
  cursor:pointer;transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease;
  line-height:1;white-space:nowrap;
}
.blx-btn:active{transform:translateY(1px)}
.blx-btn--primary{background:var(--blx-blue-600);color:#fff}
.blx-btn--primary:hover{background:var(--blx-navy-800);color:#fff}
.blx-btn--current{background:var(--blx-current);color:#fff;box-shadow:0 10px 30px -14px rgba(14,99,214,.85)}
.blx-btn--current:hover{filter:brightness(1.06);color:#fff}
.blx-btn--ghost{background:transparent;color:var(--blx-navy-800);border-color:var(--blx-rule-strong)}
.blx-btn--ghost:hover{border-color:var(--blx-navy-800);background:var(--blx-chrome-200)}
.blx-btn--on-deep{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(201,214,230,.32)}
.blx-btn--on-deep:hover{background:rgba(255,255,255,.16);color:#fff}
.blx-btn--sm{padding:.65rem 1rem;font-size:.75rem}

.blx-btnrow{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* Below roughly 520px a long uppercase label is wider than the viewport, and
   a nowrap button then drags the entire page sideways. */
@media (max-width:560px){
  .blx-btn{white-space:normal;text-align:center;line-height:1.25}
  .blx-btnrow .blx-btn{width:100%}
}

/* ==========================================================================
   7 · TYPE HELPERS
   ========================================================================== */

.blx-eyebrow{
  font-family:var(--blx-font-display);font-size:.6875rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blx-blue-600);
  margin:0 0 1rem;display:flex;align-items:center;gap:.6rem;
}
.blx-eyebrow::before{content:"";width:26px;height:2px;background:var(--blx-current);border-radius:2px;flex:none}
.blx-section--deep .blx-eyebrow{color:var(--blx-cyan-300)}

.blx-sectionhead{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)}
.blx-sectionhead h2{margin:0 0 .85rem;font-size:clamp(1.75rem,3.4vw,2.625rem);font-weight:700;letter-spacing:-.024em;line-height:1.08}
.blx-sectionhead p{margin:0;font-size:clamp(1.0625rem,1.6vw,1.1875rem);color:var(--blx-ink-2);line-height:1.55}
.blx-section--deep .blx-sectionhead p{color:var(--blx-chrome-300)}

.blx-lead{font-size:clamp(1.0625rem,1.7vw,1.25rem);line-height:1.55;color:var(--blx-ink-2)}
.blx-mono{font-family:var(--blx-font-data);font-variant-numeric:tabular-nums}

/* ==========================================================================
   8 · HERO
   ========================================================================== */

.blx-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(162deg,#0A1B3D 0%,#061229 58%,#0A2148 100%);
  color:var(--blx-chrome-200);
  --blx-mark-void:#0A1B3D;
  padding-block:clamp(4rem,10vw,7.5rem);
}
.blx-hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(110,221,243,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,221,243,.06) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 10%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 10%,#000 10%,transparent 72%);
  pointer-events:none;
}
/* A single cyan light source, low and to the right — the aquifer glow. */
.blx-hero::after{
  content:"";position:absolute;right:-12%;bottom:-38%;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(34,184,220,.30) 0%,rgba(14,99,214,.12) 42%,transparent 68%);
  pointer-events:none;
}
.blx-hero__inner{position:relative;z-index:2;max-width:var(--blx-maxw);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2rem);
  display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:980px){.blx-hero__inner{grid-template-columns:1.08fr .92fr;align-items:center}}

.blx-hero h1{
  color:#fff;margin:0 0 1.25rem;
  font-size:clamp(2.375rem,5.4vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;
}
.blx-hero h1 em{
  font-style:normal;
  background:var(--blx-current);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .blx-hero h1 em{color:var(--blx-cyan-300);-webkit-text-fill-color:currentColor}
}
.blx-hero__lede{font-size:clamp(1.0625rem,1.9vw,1.3125rem);line-height:1.55;color:var(--blx-chrome-300);
  max-width:56ch;margin:0 0 2rem}
.blx-hero__meta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;
  font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blx-chrome-400)}
.blx-hero__meta b{color:var(--blx-cyan-300);font-weight:500}

/* Instrument panel — the hero's right-hand proof object. */
.blx-panel{
  background:linear-gradient(180deg,rgba(18,48,95,.72) 0%,rgba(10,27,61,.86) 100%);
  border:1px solid rgba(110,221,243,.20);
  border-radius:12px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
  overflow:hidden;
}
.blx-panel__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid rgba(110,221,243,.18);
  background:rgba(6,18,41,.5);
  font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blx-chrome-400);
}
.blx-panel__live{display:inline-flex;align-items:center;gap:.45rem;color:var(--blx-cyan-300)}
.blx-panel__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blx-cyan-300);
  box-shadow:0 0 0 0 rgba(110,221,243,.7);animation:blxPulse 2.4s ease-out infinite}
@keyframes blxPulse{
  0%{box-shadow:0 0 0 0 rgba(110,221,243,.55)}
  70%{box-shadow:0 0 0 9px rgba(110,221,243,0)}
  100%{box-shadow:0 0 0 0 rgba(110,221,243,0)}
}
@media (prefers-reduced-motion:reduce){.blx-panel__live::before{animation:none}}
.blx-panel__body{padding:1.35rem 1.35rem 1.5rem}
.blx-panel__rows{display:grid;gap:.55rem;margin-top:1.25rem}
.blx-panel__row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.6rem .1rem;border-bottom:1px solid rgba(201,214,230,.11)}
.blx-panel__row:last-child{border-bottom:0}
.blx-panel__k{font-size:.8125rem;color:var(--blx-chrome-300)}
.blx-panel__v{font-family:var(--blx-font-data);font-size:.9375rem;color:#fff;font-variant-numeric:tabular-nums}
.blx-panel__v small{color:var(--blx-chrome-400);font-size:.75rem}

/* ==========================================================================
   9 · GAUGE
   ========================================================================== */

.blx-gauge{display:flex;align-items:center;gap:1.25rem}
.blx-gauge__dial{flex:none;position:relative;width:132px;height:132px}
.blx-gauge__num{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--blx-font-display);line-height:1;
}
.blx-gauge__score{font-size:2.25rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.blx-gauge__grade{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blx-cyan-300);margin-top:.4rem}
.blx-gauge__legend{display:grid;gap:.45rem;font-size:.8125rem;color:var(--blx-chrome-300)}
.blx-gauge__legend b{color:#fff;font-weight:600}

/* ==========================================================================
   10 · CARDS & GRIDS
   ========================================================================== */

.blx-grid{display:grid;gap:1.125rem}
.blx-grid--2{grid-template-columns:1fr}
.blx-grid--3{grid-template-columns:1fr}
.blx-grid--4{grid-template-columns:1fr}
.blx-grid--5{grid-template-columns:1fr}
@media (min-width:640px){
  .blx-grid--2,.blx-grid--4{grid-template-columns:repeat(2,1fr)}
  .blx-grid--5{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .blx-grid--3{grid-template-columns:repeat(3,1fr)}
  .blx-grid--4{grid-template-columns:repeat(4,1fr)}
  /* Three, not five. A card needs roughly 45 characters of measure before the
     copy stops reading and starts stacking. */
  .blx-grid--5{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1500px){
  .blx-grid--5{grid-template-columns:repeat(5,1fr)}
}

.blx-card{
  background:var(--blx-white);
  border:1px solid var(--blx-rule);
  border-radius:var(--blx-radius);
  padding:1.6rem 1.5rem;
  box-shadow:var(--blx-shadow-card);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  position:relative;
}
.blx-card--link:hover{transform:translateY(-3px);box-shadow:var(--blx-shadow-lift);border-color:var(--blx-chrome-300)}
.blx-card h3{margin:0 0 .6rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.005em;
  min-height:1.2em;text-wrap:balance}
.blx-card p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--blx-ink-2)}
.blx-card p + p{margin-top:.7rem}

.blx-section--deep .blx-card{
  background:rgba(18,48,95,.42);
  border-color:rgba(110,221,243,.18);
  box-shadow:none;
}
.blx-section--deep .blx-card p{color:var(--blx-chrome-300)}

.blx-card__icon{
  width:46px;height:46px;border-radius:10px;margin-bottom:1.15rem;
  display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(14,99,214,.14),rgba(34,184,220,.20));
  border:1px solid rgba(14,99,214,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  color:var(--blx-navy-700);
}
.blx-section--deep .blx-card__icon{
  background:linear-gradient(150deg,rgba(30,134,240,.22),rgba(34,184,220,.20));
  border-color:rgba(110,221,243,.28);color:var(--blx-cyan-300);
}
.blx-card__icon svg{width:23px;height:23px;stroke-width:1.75}

/* Stat tile */
.blx-stat{background:var(--blx-white);border:1px solid var(--blx-rule);border-radius:var(--blx-radius);
  padding:1.35rem 1.4rem;box-shadow:var(--blx-shadow-card)}
.blx-section--deep .blx-stat{background:rgba(18,48,95,.42);border-color:rgba(110,221,243,.18);box-shadow:none}
.blx-stat__n{display:block;font-family:var(--blx-font-display);font-size:2.1rem;font-weight:800;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--blx-navy-900)}
.blx-section--deep .blx-stat__n{color:#fff}
.blx-stat__n--accent{background:var(--blx-current);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.blx-stat__l{display:block;margin-top:.65rem;font-family:var(--blx-font-data);font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blx-ink-3);line-height:1.55}
.blx-section--deep .blx-stat__l{color:var(--blx-chrome-400)}

/* Pills */
.blx-pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--blx-font-data);
  font-size:.625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:4px;white-space:nowrap}
.blx-pill--ok{background:rgba(18,119,90,.12);color:var(--blx-ok)}
.blx-pill--warn{background:rgba(154,102,18,.13);color:var(--blx-warn)}
.blx-pill--bad{background:rgba(176,58,46,.12);color:var(--blx-bad)}
.blx-pill--info{background:rgba(14,99,214,.10);color:var(--blx-blue-600)}
.blx-section--deep .blx-pill--info{background:rgba(110,221,243,.14);color:var(--blx-cyan-300)}

/* ==========================================================================
   11 · STANDARDS BAR
   ========================================================================== */

.blx-standards{border-block:1px solid var(--blx-rule);background:var(--blx-white)}
.blx-standards__inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;
  padding-block:1.35rem}
.blx-standards__label{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blx-ink-3);flex:none}
.blx-standards__list{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;list-style:none;margin:0;padding:0}
.blx-standards__list li{font-family:var(--blx-font-display);font-size:.8125rem;font-weight:600;
  color:var(--blx-ink-2);letter-spacing:.01em;white-space:nowrap}
.blx-standards__list li span{color:var(--blx-ink-3);font-weight:400}

/* ==========================================================================
   12 · FIGURE / DIAGRAM
   ========================================================================== */

.blx-figure{margin:2rem 0}
.blx-figure__frame{
  overflow-x:auto;background:var(--blx-white);border:1px solid var(--blx-rule);
  border-radius:var(--blx-radius);padding:1.5rem 1.25rem;box-shadow:var(--blx-shadow-card);
}
.blx-section--deep .blx-figure__frame{background:rgba(18,48,95,.36);border-color:rgba(110,221,243,.18);box-shadow:none}
.blx-figure__frame svg{width:100%;height:auto;max-width:960px;margin-inline:auto}
.blx-figure figcaption{margin-top:.75rem;font-family:var(--blx-font-data);font-size:.625rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--blx-ink-3)}
.blx-section--deep .blx-figure figcaption{color:var(--blx-chrome-400)}

.dg-box{fill:var(--blx-chrome-200);stroke:var(--blx-chrome-400)}
.dg-box-warn{fill:rgba(154,102,18,.12);stroke:var(--blx-warn)}
.dg-box-bad{fill:rgba(176,58,46,.10);stroke:var(--blx-bad)}
.dg-box-ok{fill:rgba(18,119,90,.10);stroke:var(--blx-ok)}
.dg-lbl{fill:var(--blx-navy-900);font-family:var(--blx-font-display);font-size:12.5px;font-weight:700}
.dg-sub{fill:var(--blx-ink-3);font-family:var(--blx-font-data);font-size:9px;letter-spacing:.05em}
.dg-line{stroke:var(--blx-chrome-400);fill:none}
.dg-head{fill:var(--blx-chrome-400)}
.dg-yes{fill:var(--blx-bad);font-family:var(--blx-font-data);font-size:9.5px;font-weight:600;letter-spacing:.09em}
.dg-no{fill:var(--blx-blue-600);font-family:var(--blx-font-data);font-size:9.5px;font-weight:600;letter-spacing:.09em}
.blx-section--deep .dg-box{fill:rgba(201,214,230,.10);stroke:rgba(201,214,230,.35)}
.blx-section--deep .dg-lbl{fill:#fff}
.blx-section--deep .dg-sub{fill:var(--blx-chrome-400)}
.blx-section--deep .dg-line,.blx-section--deep .dg-head{stroke:rgba(201,214,230,.4);fill:none}
.blx-section--deep .dg-head{fill:rgba(201,214,230,.4)}

/* ==========================================================================
   13 · TABLES
   ========================================================================== */

.blx-tablewrap{overflow-x:auto;border:1px solid var(--blx-rule);border-radius:var(--blx-radius);
  background:var(--blx-white);margin:1.75rem 0}
.blx-table{border-collapse:collapse;width:100%;min-width:620px;font-size:.875rem}
.blx-table th{
  font-family:var(--blx-font-display);font-size:.625rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;text-align:left;color:var(--blx-ink-3);
  padding:.85rem 1.1rem;background:var(--blx-chrome-200);
  border-bottom:1px solid var(--blx-rule-strong);white-space:nowrap;
}
.blx-table td{padding:.85rem 1.1rem;border-bottom:1px solid var(--blx-rule);vertical-align:top;color:var(--blx-ink-2)}
.blx-table tr:last-child td{border-bottom:0}
.blx-table td:first-child{color:var(--blx-navy-900);font-weight:600}
.blx-table .num{font-family:var(--blx-font-data);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8125rem}

/* ==========================================================================
   14 · CALCULATOR
   ========================================================================== */

.blx-calc{
  display:grid;gap:1.5rem;grid-template-columns:1fr;
  background:var(--blx-white);border:1px solid var(--blx-rule);
  border-radius:12px;padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--blx-shadow-lift);
}
@media (min-width:900px){.blx-calc{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:2.5rem}}

.blx-calc__fields{display:grid;gap:1.1rem}
.blx-field{display:grid;gap:.4rem}
.blx-field label{font-family:var(--blx-font-display);font-size:.8125rem;font-weight:600;color:var(--blx-navy-800)}
.blx-field__hint{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--blx-ink-3);letter-spacing:.02em}
.blx-field input,.blx-field select,.blx-field textarea{
  font-family:var(--blx-font-data);font-size:.9375rem;
  padding:.75rem .85rem;border:1px solid var(--blx-rule-strong);border-radius:6px;
  background:var(--blx-white);color:var(--blx-ink);width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.blx-field input:focus,.blx-field select:focus,.blx-field textarea:focus{
  outline:none;border-color:var(--blx-blue-500);box-shadow:0 0 0 3px rgba(30,134,240,.16);
}
.blx-field input[aria-invalid="true"]{border-color:var(--blx-bad)}
.blx-field__err{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--blx-bad)}

.blx-calc__out{
  background:linear-gradient(170deg,#0A1B3D 0%,#061229 100%);
  border-radius:10px;padding:1.5rem;color:var(--blx-chrome-200);
  display:flex;flex-direction:column;gap:1rem;justify-content:center;
}
.blx-calc__big{font-family:var(--blx-font-display);font-size:clamp(2rem,5vw,2.75rem);font-weight:800;
  line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.blx-calc__big.is-good{background:var(--blx-current);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.blx-calc__cap{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blx-chrome-400)}
.blx-calc__line{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;
  padding-block:.5rem;border-bottom:1px solid rgba(201,214,230,.14)}
.blx-calc__line:last-of-type{border-bottom:0}
.blx-calc__line b{font-family:var(--blx-font-data);color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.blx-calc__note{font-size:.75rem;color:var(--blx-chrome-400);line-height:1.5;margin:0}

/* ==========================================================================
   15 · PRICING
   ========================================================================== */

.blx-tier{background:var(--blx-white);border:1px solid var(--blx-rule);border-radius:10px;
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;box-shadow:var(--blx-shadow-card);position:relative}
.blx-tier--feature{border:1.5px solid var(--blx-blue-500);box-shadow:var(--blx-shadow-lift)}
.blx-tier__flag{position:absolute;top:-11px;left:1.6rem;background:var(--blx-current);color:#fff;
  font-family:var(--blx-font-display);font-size:.625rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:4px}
.blx-tier__name{font-family:var(--blx-font-display);font-size:.75rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blx-blue-600);margin-bottom:.9rem}
.blx-tier__price{font-family:var(--blx-font-display);font-size:1.75rem;font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:var(--blx-navy-900);font-variant-numeric:tabular-nums}
.blx-tier__price span{font-size:.8125rem;font-weight:500;color:var(--blx-ink-3);letter-spacing:0}
.blx-tier__desc{font-size:.9rem;color:var(--blx-ink-2);line-height:1.6;margin:1rem 0 1.25rem}
.blx-tier__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.55rem;font-size:.875rem;color:var(--blx-ink-2)}
.blx-tier__list li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.5}
.blx-tier__list li::before{content:"";flex:none;width:15px;height:15px;margin-top:.2rem;border-radius:50%;
  background:rgba(18,119,90,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.4' fill='none' stroke='%2312775A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.blx-tier .blx-btn{margin-top:auto;width:100%}

/* ==========================================================================
   16 · STEPS / TIMELINE
   ========================================================================== */

.blx-steps{display:grid;gap:0;margin:2rem 0}
.blx-step{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.35rem 0;
  border-top:1px solid var(--blx-rule)}
.blx-step:last-child{border-bottom:1px solid var(--blx-rule)}
.blx-step__n{font-family:var(--blx-font-data);font-size:.6875rem;font-weight:600;letter-spacing:.09em;
  color:var(--blx-blue-600);padding-top:.35rem;min-width:2.2rem}
.blx-section--deep .blx-step__n{color:var(--blx-cyan-300)}
.blx-step h3{margin:0 0 .4rem;font-size:1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.blx-step p{margin:0;font-size:.9rem;color:var(--blx-ink-2);line-height:1.6}
.blx-section--deep .blx-step p{color:var(--blx-chrome-300)}

/* ==========================================================================
   17 · NOTE / CALLOUT
   ========================================================================== */

.blx-note{border-left:3px solid var(--blx-blue-500);background:var(--blx-white);
  padding:1.15rem 1.4rem;border-radius:0 8px 8px 0;margin:1.75rem 0;
  font-size:.9375rem;color:var(--blx-ink-2);box-shadow:var(--blx-shadow-card)}
.blx-note b{color:var(--blx-navy-900)}
.blx-note p{margin:0}
.blx-note p + p{margin-top:.75rem}
.blx-note--ok{border-left-color:var(--blx-ok)}
.blx-note--warn{border-left-color:var(--blx-warn)}
.blx-note--bad{border-left-color:var(--blx-bad)}
.blx-section--deep .blx-note{background:rgba(18,48,95,.42);color:var(--blx-chrome-300);box-shadow:none}
.blx-section--deep .blx-note b{color:#fff}

/* ==========================================================================
   18 · FORM (demo request)
   ========================================================================== */

.blx-form{display:grid;gap:1.1rem;max-width:640px}
.blx-form__row{display:grid;gap:1.1rem}
@media (min-width:640px){.blx-form__row--2{grid-template-columns:1fr 1fr}}
.blx-form__consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.8125rem;color:var(--blx-ink-3);line-height:1.5}
.blx-form__consent input{margin-top:.25rem;flex:none;width:auto}
/* Honeypot — hidden from people, irresistible to bots. */
.blx-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   19 · FOOTER
   ========================================================================== */

.blx-footer{
  background:linear-gradient(180deg,#061229 0%,#040D1E 100%);
  color:var(--blx-chrome-300);
  --blx-mark-void:#061229;
  padding-block:clamp(3rem,6vw,4.5rem) 0;
}
.blx-footer__grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:600px){.blx-footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.blx-footer__grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.blx-footer h2{font-family:var(--blx-font-display);font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blx-chrome-400);margin:0 0 1rem}
.blx-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.blx-footer a{color:var(--blx-chrome-300);text-decoration:none;font-size:.9rem}
.blx-footer a:hover{color:#fff;text-decoration:underline}
.blx-footer__blurb{font-size:.9rem;line-height:1.65;color:var(--blx-chrome-400);max-width:38ch;margin:1.25rem 0 0}
.blx-footer__bar{margin-top:3rem;padding-block:1.5rem;border-top:1px solid rgba(201,214,230,.13);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;
  font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.06em;color:var(--blx-chrome-400)}
.blx-footer__legal{display:flex;flex-wrap:wrap;gap:1.25rem}

/* ==========================================================================
   20 · POST / EDITOR CONTENT
   ========================================================================== */

.blx-prose{max-width:72ch}
.blx-prose > * + *{margin-top:1.15rem}
.blx-prose h2{margin-top:2.75rem;font-size:1.75rem}
.blx-prose h3{margin-top:2rem;font-size:1.3125rem}
.blx-prose ul,.blx-prose ol{padding-left:1.35rem}
.blx-prose li + li{margin-top:.5rem}
.blx-prose img{border-radius:8px}
.blx-prose code{font-family:var(--blx-font-data);font-size:.875em;background:var(--blx-chrome-200);
  padding:.14em .4em;border-radius:4px}
.blx-prose pre{background:var(--blx-navy-900);color:var(--blx-chrome-200);padding:1.25rem;
  border-radius:8px;overflow-x:auto;font-family:var(--blx-font-data);font-size:.8125rem;line-height:1.65}
.blx-prose pre code{background:none;padding:0;color:inherit}
.blx-prose blockquote{border-left:3px solid var(--blx-blue-500);padding-left:1.25rem;margin-left:0;
  color:var(--blx-ink-2);font-size:1.0625rem}

.blx-postmeta{font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blx-ink-3);margin-bottom:1rem}

.blx-postcard{display:flex;flex-direction:column;gap:.6rem;background:var(--blx-white);
  border:1px solid var(--blx-rule);border-radius:8px;padding:1.5rem;box-shadow:var(--blx-shadow-card);
  transition:transform .2s ease,box-shadow .2s ease}
.blx-postcard:hover{transform:translateY(-3px);box-shadow:var(--blx-shadow-lift)}
.blx-postcard h3{margin:0;font-size:1.0625rem}
.blx-postcard h3 a{color:var(--blx-navy-900);text-decoration:none}
.blx-postcard p{margin:0;font-size:.9rem;color:var(--blx-ink-2)}

.blx-pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.5rem;font-family:var(--blx-font-data);font-size:.8125rem}
.blx-pagination a,.blx-pagination span{padding:.55rem .85rem;border:1px solid var(--blx-rule);
  border-radius:6px;text-decoration:none;color:var(--blx-ink-2);background:#fff}
.blx-pagination .current{background:var(--blx-navy-800);color:#fff;border-color:var(--blx-navy-800)}

/* ==========================================================================
   21 · MOTION
   ========================================================================== */

.blx-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.blx-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .blx-reveal{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   22 · PRINT
   ========================================================================== */

@media print{
  .blx-header,.blx-footer,.blx-burger,.blx-nav,.blx-btn,.blx-skip{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .blx-section{padding-block:1rem}
  .blx-section--deep,.blx-hero{background:#fff!important;color:#000!important}
  .blx-section--deep :where(h1,h2,h3,h4),.blx-hero h1{color:#000!important;-webkit-text-fill-color:#000!important}
  .blx-card,.blx-stat,.blx-tier{box-shadow:none;border:1px solid #999;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ==========================================================================
   23 · WORDPRESS HOUSEKEEPING
   ========================================================================== */

.alignleft{float:left;margin:.4rem 1.5rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.5rem}
.aligncenter{margin-inline:auto;display:block}
.wp-caption-text,.wp-element-caption{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--blx-ink-3)}
.sticky{position:relative}
.admin-bar .blx-header{top:32px}
@media (max-width:782px){.admin-bar .blx-header{top:46px}}