/* ═══════════════════════════════════════════════════════════════════════
   Orion — design tokens
   The single source of type, colour, radii, borders, spacing, focus and
   motion for every page. Linked from every page; nothing below should be
   re-declared in a page's own <style> block.

   Before this file the site declared 74 distinct font sizes, 24 radii,
   67 border treatments and 16 font-family stacks across 13 pages, with
   12 declared sizes below 12px.
   ═══════════════════════════════════════════════════════════════════════ */

:root{

  /* ── TYPE ──────────────────────────────────────────────────────────────
     Cormorant Garamond — display headings and large numerals.
     Montserrat       — body, UI, labels, small caps.
     Cinzel           — the logo lockup only.
     DM Mono          — data tables where columns must align. Nothing else. */
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-logo:'Cinzel',var(--font-display);
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── TYPE SCALE — exactly 8 steps ──────────────────────────────────────
     Nothing below --fs-1 (12px) exists anywhere, including legal footers
     and the logo lockup. Fluid where a step spans a wide range. */
  --fs-1:12px;                              /* legal, captions, pills      */
  --fs-2:13px;                              /* small UI, table cells       */
  --fs-3:15px;                              /* body copy                   */
  --fs-4:16px;                              /* lead paragraphs             */
  --fs-5:clamp(17px,1.25vw,18px);           /* sub-headings, card titles   */
  --fs-6:clamp(20px,2.2vw,22px);            /* section sub-heads           */
  --fs-7:clamp(25px,3.2vw,30px);            /* section headings            */
  --fs-8:clamp(31px,3.6vw,48px);            /* hero, page titles, numerals */

  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-body:1.65;
  --lh-loose:1.8;

  --ls-tight:-0.02em;
  --ls-normal:0;
  --ls-wide:0.08em;
  --ls-caps:0.14em;                         /* small caps / label tracking */

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;

  /* ── COLOUR ────────────────────────────────────────────────────────────
     Contrast measured against --ink (the page background) and --surface
     (panels). Every value used for text clears 4.5:1 on both. */
  --ink:#050508;                            /* page — darkest              */
  --surface:#0D0D14;                        /* panels — one step up        */
  --surface-2:#13131C;                      /* hover — one step up again   */

  --gold:#C9A84C;                           /* 8.0:1 on ink                */
  --gold-bright:#E2C97E;
  --gold-deep:#8B6914;                      /* print / on-light only       */
  --gold-dim:rgba(201,168,76,.36);          /* borders, never text         */

  --cream:#F0E8D5;                          /* 16.4:1 on ink               */
  --text:rgba(240,232,213,.86);             /* body — 12.3:1               */
  --text-2:rgba(240,232,213,.72);            /* secondary — 8.6:1          */
  --text-3:rgba(240,232,213,.58);            /* tertiary — 5.7:1, the floor*/
  --danger:#E0857F;                         /* 6.4:1 on ink                */

  /* ── BORDERS — two treatments only ─────────────────────────────────── */
  --line:1px solid rgba(240,232,213,.10);        /* hairline               */
  --line-strong:1px solid rgba(201,168,76,.38);  /* emphasis               */
  --line-colour:rgba(240,232,213,.10);
  --line-strong-colour:rgba(201,168,76,.38);

  /* ── RADII — three values only ─────────────────────────────────────── */
  --r-sm:8px;                               /* inputs, pills, small chips  */
  --r-md:12px;                              /* panels, cards, tiles        */
  --r-pill:100px;                           /* buttons and tags            */

  /* ── SPACING — one scale ───────────────────────────────────────────── */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:24px;  --sp-6:32px;  --sp-7:48px;  --sp-8:64px;
  --sp-9:96px;  --sp-10:128px;

  /* ── LAYOUT ────────────────────────────────────────────────────────── */
  --measure:70ch;                           /* readable prose width        */
  --wrap:1240px;                            /* page container              */
  --wrap-wide:1560px;

  /* ── MOTION — one easing, one duration scale ───────────────────────── */
  --ease:cubic-bezier(.33,1,.68,1);
  --dur-1:160ms;
  --dur-2:260ms;
  --dur-3:420ms;
  --dur-4:700ms;
}

/* ── FOCUS — visible on every interactive element ───────────────────────
   Applied by element rather than by class so a page cannot opt out by
   forgetting to add one. Anything that removes it must replace it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
/* Never leave an element unfocusable-looking: :focus-visible only shows for
   keyboard users, so the mouse experience is unchanged. */

/* ── NAVIGATION ─────────────────────────────────────────────────────────
   No container. The header has no background of its own at any scroll
   position — what sits behind it is the page.

   It was a centred pill: a 72%-opaque near-black capsule, a gold hairline
   down each side of the links, a fixed 700px link block and a pill of
   background on every hover. All of that is gone. What is left is a
   full-width row that aligns to the same gutter as the page content, so the
   wordmark sits directly above the headline rather than floating in the
   middle of the screen.

   The selector carries an attribute so it outranks each page's own `nav {}`
   rule without needing !important.                                        */
nav[id]{
  position:fixed;
  top:0; left:0; right:0;
  transform:none;
  width:100%;
  max-width:none;
  margin:0;
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  /* the page gutter: content stays on the same left edge as the hero */
  /* the site's content edge: .wrap is max-width 1240 with 48px padding */
  padding:var(--sp-5) max(48px, calc((100vw - 1240px) / 2 + 48px));
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:padding var(--dur-3) var(--ease);
}
/* Scrolling tightens the row. */
nav[id].scrolled{
  padding-top:var(--sp-4);
  padding-bottom:var(--sp-4);
  background:none;
  border:0;
  box-shadow:none;
}

/* ── the scrim ──────────────────────────────────────────────────────────
   Once content is moving underneath, the row needs something to sit on or
   the type collides with whatever passes below it. Not a box: a full-width
   wash of the page's own background colour, densest at the very top and
   falling to nothing well below the row, with a mask softening the last of
   it so there is no edge to see. It is the same --ink the page is painted
   in, so it reads as the screen darkening rather than a panel arriving. */
nav[id]::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:calc(100% + 56px);
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,
    rgba(5,5,8,.96)  0%,
    rgba(5,5,8,.88) 40%,
    rgba(5,5,8,.62) 68%,
    rgba(5,5,8,.22) 86%,
    rgba(5,5,8,0)  100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  transition:opacity var(--dur-3) var(--ease);
}
nav[id].scrolled::before{opacity:1}

/* ── wordmark ──────────────────────────────────────────────────────────
   Smaller and tighter. At 14px with 0.3em tracking the five letters ran
   wider than the nav item beside them and read as the loudest thing on the
   page, which is not what a wordmark is for. */
nav[id] .logo{gap:var(--sp-3);padding:0;flex-shrink:0}
nav[id] .logo svg{width:22px;height:22px}
nav[id] .logo-name{
  font-size:var(--fs-1);
  letter-spacing:.22em;
  line-height:1;
  font-weight:var(--fw-regular);
}

/* ── links ─────────────────────────────────────────────────────────────
   No rules either side, no fixed width, no pill on hover. A hairline grows
   under the label instead — the whole indication is 1px tall. */
nav[id] .nav-center{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-2);
  width:auto;
  margin:0;
  padding:0;
  border:0;
}
nav[id] .nav-center li{flex:0 0 auto}
nav[id] .nav-center a,
nav[id] button.nav-dropdown-trigger{
  position:relative;
  padding:var(--sp-2) var(--sp-3);
  border-radius:0;
  background:none;
  color:var(--text-3);
  transition:color var(--dur-2) var(--ease);
}
nav[id] .nav-center a::after,
nav[id] button.nav-dropdown-trigger::after{
  content:'';
  position:absolute;
  left:var(--sp-3); right:var(--sp-3);
  bottom:2px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--dur-2) var(--ease);
}
nav[id] .nav-center a:hover,
nav[id] button.nav-dropdown-trigger:hover,
nav[id] .nav-has-dropdown.open > button.nav-dropdown-trigger{
  color:var(--cream);
  background:none;
}
nav[id] .nav-center a:hover::after,
nav[id] button.nav-dropdown-trigger:hover::after,
nav[id] .nav-has-dropdown.open > button.nav-dropdown-trigger::after{transform:scaleX(1)}
/* the trigger keeps its caret, so the rule must not run under it */
nav[id] button.nav-dropdown-trigger::after{right:calc(var(--sp-3) + 10px)}

/* ── the one action ────────────────────────────────────────────────────
   Kept solid, because it is the only thing on the row that should be
   pressed, but lighter than it was: no glow, no oversized padding. */
nav[id] .nav-btn{
  flex-shrink:0;
  padding:7px 17px;
  font-size:var(--fs-1);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  box-shadow:none;
  transition:opacity var(--dur-2) var(--ease);
}
nav[id] .nav-btn:hover{opacity:.86;box-shadow:none}

nav[id] .nav-burger{
  margin-left:auto;
  background:none;
  border:1px solid var(--gold-dim);
}

@media(max-width:1100px){
  nav[id]{padding:var(--sp-4) var(--sp-5);gap:var(--sp-4)}
  nav[id].scrolled{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
  /* Each page collapses the links into the burger with `nav .nav-center`,
     which the nav[id] rules above out-specify — so the links stayed visible
     and ran off the side of the phone. Restate it at the same weight.
     body has overflow-x:hidden, so this was clipped rather than scrollable:
     invisible to an overflow check and unreachable to a reader. */
  nav[id] .nav-center,
  nav[id] .nav-btn{display:none}
  /* the three bars are block elements with vertical margins; flex-row
     collapsed them onto one line, so stack them explicitly */
  /* 44×44 so it is a circle and a full tap target — the 44px minimum below
     was stretching a 38px-wide button into an oval. */
  nav[id] .nav-burger{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px;width:44px;height:44px}
  nav[id] .nav-burger span{margin:0}
}
@media(prefers-reduced-motion:reduce){
  nav[id],nav[id] .nav-center a::after,
  nav[id] button.nav-dropdown-trigger::after{transition:none}
}

/* ── THE END OF THE PAGE ────────────────────────────────────────────────
   Matching the live site: the trust bar and the footer each carry a solid
   dark ground and the footer has no margin, so the two butt together and
   the page closes as one block. The gap in the rebuild came from a
   transparent footer pushed down by a 96px margin.
   `body footer` outranks the per-page `footer` rule appended to each page's
   own stylesheet.                                                         */
body footer{
  margin-top:0;
  padding:60px 0 40px;
  background:#03030a;
  border-top:1px solid var(--line-colour);
  position:relative;
  z-index:10;
}

/* the closing call, as on the live site */
.footer-cta-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);flex-wrap:wrap;
  padding:var(--sp-6) var(--sp-7);
  margin-bottom:var(--sp-8);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  background:rgba(4,4,10,.32);
}
.footer-cta-text{
  font-family:var(--font-display);font-size:var(--fs-6);
  font-weight:var(--fw-semi);color:var(--cream);line-height:var(--lh-snug)}
.footer-cta-text em{font-style:italic;color:var(--gold);font-weight:var(--fw-light)}
.footer-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp-3) var(--sp-6);border-radius:var(--r-pill);
  font-size:var(--fs-1);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;text-decoration:none;white-space:nowrap;flex-shrink:0}
@media(max-width:700px){
  .footer-cta-bar{flex-direction:column;align-items:flex-start;
    padding:var(--sp-5);gap:var(--sp-4)}
}

/* ── ACTION GEOMETRY ──────────────────────────────────────────────────────
   The gold rules below only ever set colour; the shape lived in each page's
   own stylesheet, so pages that do not carry one — the system specs, and the
   rebuilt pricing page — rendered these as bare underlined text. Single-class
   selectors, so a page that defines its own still wins. */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 17px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-semi);
  letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;
  text-align:center;max-width:100%;cursor:pointer;
  transition:opacity var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.btn-primary{background:var(--gold);color:#0a0a0a;border:0}
.btn-ghost{border:var(--line-strong);color:var(--gold);background:none}

/* Every gold action carried its own padding in its own page's stylesheet —
   12 to 17px of it, with 0.2em tracking — so they stayed large whatever the
   token said. Doubled selectors, so these win over a page-level rule without
   depending on load order. */
.nav-btn.nav-btn,
.btn-gold.btn-gold,
.sec-btn.sec-btn,
.sec-btn-ghost.sec-btn-ghost,
.footer-cta-btn.footer-cta-btn,
.sq-action.sq-action,
.dr-cta.dr-cta,
.sp-cta.sp-cta,
.roi-mini-btn.roi-mini-btn,
.tier-cta-btn.tier-cta-btn,
.capx-cta.capx-cta,
.sov-cta.sov-cta,
.pkg-cta.pkg-cta,
.phone-send.phone-send,
.pt-btn.pt-btn{
  padding:7px 17px;
  font-size:var(--fs-1);
  font-weight:var(--fw-semi);
  letter-spacing:.08em;
  border-radius:var(--r-pill);
  gap:7px;
}
/* the ones that span their column keep the width and lose only the height */
.audit-submit.audit-submit,
.demo-btn.demo-btn,
.mm-cta.mm-cta{
  padding:11px 18px;
  font-size:var(--fs-1);
  font-weight:var(--fw-semi);
  letter-spacing:.08em;
}

/* ── GOLD ACTIONS ───────────────────────────────────────────────────────
   Flat #C9A84C over a near-black page reads washed out: there is nothing in
   it for light to catch. These give it a body — a short vertical gradient
   from a lighter top edge to a deeper base, a hairline of true highlight
   along the top, and a shadow tinted with the gold rather than pure black,
   so the glow belongs to the object instead of sitting behind it.

   Pressing it moves the gradient rather than the element, which is what a
   physical key does.                                                      */
.nav-btn.nav-btn,
.btn-gold.btn-gold,
.btn-primary.btn-primary,
.sec-btn.sec-btn,
.pkg-cta.pkg-cta,
.sov-cta.sov-cta,
.capx-cta.capx-cta,
.tier-cta-btn.tier-cta-btn,
.audit-submit.audit-submit,
.footer-cta-btn.footer-cta-btn,
.mm-cta.mm-cta,
.sq-action.sq-action,
.dr-cta.dr-cta,
.sp-cta.sp-cta,
.roi-mini-btn.roi-mini-btn,
.demo-btn.demo-btn,
.phone-send.phone-send,
.pt-btn.pt-btn:not(.ghost){
  background-image:linear-gradient(177deg,
    #F2DC9E 0%,
    #DFC273 28%,
    #C9A84C 66%,
    #AE8C32 100%);
  background-color:var(--gold);
  color:#14100A;
  border:0;
  /* A hairline rim a shade lighter than the fill is what reads as struck
     metal at this size; the old soft halo just made the button look big. */
  box-shadow:
    inset 0 1px 0 rgba(255,250,232,.58),
    inset 0 -1px 0 rgba(84,62,10,.36),
    0 0 0 1px rgba(231,201,124,.34),
    0 1px 2px rgba(0,0,0,.42);
  text-shadow:0 .5px 0 rgba(255,250,232,.26);
  transition:
    background-position var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease),
    filter var(--dur-2) var(--ease);
  background-size:100% 160%;
  background-position:0 0;
}
.nav-btn.nav-btn:hover,
.btn-gold.btn-gold:hover,
.btn-primary.btn-primary:hover,
.sec-btn.sec-btn:hover,
.pkg-cta.pkg-cta:hover,
.sov-cta.sov-cta:hover,
.capx-cta.capx-cta:hover,
.tier-cta-btn.tier-cta-btn:hover,
.audit-submit.audit-submit:hover,
.footer-cta-btn.footer-cta-btn:hover,
.mm-cta.mm-cta:hover,
.sq-action.sq-action:hover,
.dr-cta.dr-cta:hover,
.sp-cta.sp-cta:hover,
.roi-mini-btn.roi-mini-btn:hover,
.demo-btn.demo-btn:hover,
.phone-send.phone-send:hover,
.pt-btn.pt-btn:not(.ghost):hover{
  background-position:0 100%;
  filter:brightness(1.07);
  opacity:1;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,250,232,.72),
    inset 0 -1px 0 rgba(90,68,14,.42),
    0 0 0 1px rgba(240,214,142,.55),
    0 4px 12px -4px rgba(201,168,76,.42);
}
.nav-btn.nav-btn:active,
.btn-gold.btn-gold:active,
.btn-primary.btn-primary:active,
.sec-btn.sec-btn:active,
.pkg-cta.pkg-cta:active,
.sov-cta.sov-cta:active,
.capx-cta.capx-cta:active,
.tier-cta-btn.tier-cta-btn:active,
.audit-submit.audit-submit:active,
.footer-cta-btn.footer-cta-btn:active,
.mm-cta.mm-cta:active,
.sq-action.sq-action:active,
.dr-cta.dr-cta:active,
.sp-cta.sp-cta:active,
.roi-mini-btn.roi-mini-btn:active,
.demo-btn.demo-btn:active,
.phone-send.phone-send:active,
.pt-btn.pt-btn:not(.ghost):active{
  transform:translateY(0);
  filter:brightness(.96);
  box-shadow:
    inset 0 1px 2px rgba(90,68,14,.5),
    0 0 0 1px rgba(201,168,76,.3);
}
/* the outlined twin, so the pair reads as one family */
.btn-ghost.btn-ghost,
.sec-btn-ghost.sec-btn-ghost,
.pt-btn.pt-btn.ghost{
  background:linear-gradient(180deg,rgba(201,168,76,.10),rgba(201,168,76,.02));
  border:1px solid rgba(201,168,76,.42);
  color:var(--gold-bright);
  box-shadow:inset 0 1px 0 rgba(255,248,224,.10);
  transition:border-color var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease);
}
.btn-ghost.btn-ghost:hover,
.sec-btn-ghost.sec-btn-ghost:hover,
.pt-btn.pt-btn.ghost:hover{
  border-color:rgba(201,168,76,.75);
  background:linear-gradient(180deg,rgba(201,168,76,.16),rgba(201,168,76,.05));
}
.btn-ghost.btn-ghost:active,
.sec-btn-ghost.sec-btn-ghost:active,
.pt-btn.pt-btn.ghost:active{transform:translateY(1px)}

@media(prefers-reduced-motion:reduce){
  .nav-btn,.btn-gold,.btn-primary,.sec-btn,.pkg-cta,.sov-cta,.capx-cta,
  .tier-cta-btn,.audit-submit,.footer-cta-btn,.mm-cta,.sq-action,.dr-cta,
  .sp-cta,.roi-mini-btn,.demo-btn,.phone-send,.pt-btn{transition:none}
}

/* ── HERO ───────────────────────────────────────────────────────────────
   Only two heroes were actually off the grid, so only two get a rule. The
   earlier attempt set place-items and text-align on every hero, which moved
   index and the sector pages that were already correct — their inner boxes
   were being centred by the grid, and `start` pinned them to the padding
   edge instead.

   1144 = the 1240 container minus its two 48px gutters, which the hero's own
   padding already supplies.                                               */

/* pricing and demos wrap their hero in an unclassed <div> with no width */
section.hero > div:not([class]){
  width:100%;
  max-width:1144px;
  margin-inline:auto;
  text-align:left;
}
/* services centred its inner box; each page's own max-width is already
   correct, so only the alignment needs saying */
section.hero > .hero-inner{
  margin-inline:auto;
  align-items:flex-start;
  text-align:left;
}

/* ── BUTTONS THAT ARE NOT BUTTONS ───────────────────────────────────────
   The Sectors trigger is a <button> for accessibility but reads as a nav
   link, so it must not carry the browser's default button chrome. */
/* `font:inherit` took the nav's own font rather than the sibling links', so
   the Sectors trigger rendered larger and in mixed case beside them. Match
   the link styling explicitly instead of inheriting. */
button.nav-dropdown-trigger{
  -webkit-appearance:none;appearance:none;
  background:none;border:0;margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-1);
  font-weight:var(--fw-medium);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted,var(--text-3));
  padding:7px 10px;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:color var(--dur-1) var(--ease);
}
button.nav-dropdown-trigger:hover,
.nav-has-dropdown.open > button.nav-dropdown-trigger{color:var(--cream)}

/* ── TAP TARGETS ────────────────────────────────────────────────────────
   Anything a finger has to hit gets 44px of height on a phone. */
@media(max-width:480px){
  a[class*="btn"],button,input[type="submit"],[role="tab"]{
    min-height:44px;
  }
}

/* ── MOTION PREFERENCE ──────────────────────────────────────────────────
   One global block. Reveals, loops, parallax and transitions all stop —
   on every page, whatever the page's own CSS says. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  /* reveal-on-scroll patterns must not leave content invisible */
  [class*="reveal"],[class*="fade-"],[data-reveal],.ir,.sr{
    opacity:1!important;
    transform:none!important;
    visibility:visible!important;
  }
}

/* ── BASE ───────────────────────────────────────────────────────────── */
/* Every page set this in its own stylesheet, so any page without one — the
   system spec pages — had content-box elements and padding that added to the
   width instead of sitting inside it. It belongs here. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-3);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--ink);
}
::selection{background:rgba(201,168,76,.28);color:var(--cream)}

/* Prose measure for long-form pages (legal, policies). */
.prose{max-width:var(--measure)}
.prose p,.prose li{font-size:var(--fs-3);line-height:var(--lh-loose);color:var(--text)}

/* Visually hidden, still read aloud — used for skip links and table captions */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--sp-4);top:-64px;z-index:200;
  background:var(--gold);color:#0a0a0a;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm);font-family:var(--font-body);font-size:var(--fs-1);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;
  text-decoration:none;transition:top var(--dur-1) var(--ease);
}
.skip-link:focus{top:var(--sp-4)}

/* ── SHARED MOBILE NAV ────────────────────────────────────────────────────
   One implementation for every page carrying the main nav. The markup is
   built at runtime by assets/js/nav-mobile.js; these are the only rules
   for it, so the per-page copies that used to live in four <style> blocks
   are gone.

   Visibility runs on `visibility` rather than `display` so the panel can
   fade, and so a closed menu is out of the tab order and out of the
   accessibility tree without any JS timing.
   ───────────────────────────────────────────────────────────────────── */
.nav-burger{display:none;width:38px;height:38px;border-radius:var(--r-pill);
  background:rgba(201,168,76,0.10);border:var(--line-strong);cursor:pointer;
  flex-shrink:0;margin-left:8px;padding:0}
.nav-burger span{display:block;width:16px;height:1.5px;background:var(--gold);
  margin:2.5px auto;border-radius:0;
  transition:transform var(--dur-2),opacity var(--dur-2)}
.nav-burger.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
.nav-burger:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.mobile-menu{position:fixed;inset:0;z-index:290;background:rgba(3,3,8,0.96);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  opacity:0;visibility:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transition:opacity var(--dur-2),visibility 0s linear var(--dur-2)}
.mobile-menu.open{opacity:1;visibility:visible;
  transition:opacity var(--dur-2),visibility 0s}
.mm-inner{padding:calc(env(safe-area-inset-top,0px) + 104px) 28px
  calc(env(safe-area-inset-bottom,0px) + 48px);
  display:flex;flex-direction:column;max-width:480px;margin:0 auto}
.mm-link{font-family:var(--font-display);font-size:var(--fs-6);font-weight:600;
  color:var(--cream);text-decoration:none;padding:13px 0;border-bottom:var(--line)}
.mm-link.mm-sub{font-family:var(--font-body);font-size:var(--fs-1);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:13px 0 13px 16px}
.mm-link:focus-visible,.mm-cta:focus-visible,.mm-phone:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}
.mm-group-label{font-size:var(--fs-1);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-top:20px;padding-bottom:8px}
.mm-cta{margin-top:32px;background:var(--gold);color:var(--ink);text-align:center;
  padding:17px;border-radius:var(--r-pill);font-size:var(--fs-1);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 4px 24px rgba(201,168,76,0.3)}
.mm-phone{margin-top:18px;text-align:center;font-size:var(--fs-1);letter-spacing:.1em;
  color:rgba(240,232,213,0.5);text-decoration:none}

/* The breakpoint is owned here now, so all twelve pages swap at the same
   width instead of the 900/1100/never they were each using.
   `nav .nav-center` outranks the pages' own `.nav-center{display:flex}`. */
/* Seven pages set this on their own nav; the five systems pages never did,
   so their fixed nav had z-index:auto and the hero <picture> (z-index:0,
   later in the document) painted over it — the burger and the Book a call
   button were both unclickable there, at every width. */
nav{z-index:300}

@media(max-width:1100px){
  nav .nav-center,nav .nav-btn{display:none}
  .nav-burger{display:block}
}
@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu.open{transition:none}
  .nav-burger span{transition:none}
}

/* A footer column that holds two lists: the second title needs air above it.
   Here, not in each page's own footer styles, because every page loads this. */
.footer-links + .footer-col-title{margin-top:var(--sp-6)}

/* ── GOLD ACTIONS, ONE SIZE ───────────────────────────────────────────────
   Every gold action on the site, solid or outlined, is one object now: a
   34px pill in sentence case, 12px Montserrat at 700 with wide tracking. It
   is the "Book a call" that /book always had, because it was the only one
   no page-level rule reached. Pages used to add their own capitals, padding
   and tracking on top, which is how one button became thirty.

   The finish stays struck gold. What changes is the one moment of motion:
   instead of the button jumping a pixel, a single band of light crosses the
   metal when it is pointed at or focused, and nothing moves at all for
   anyone who has asked for less motion.

   The full-width buttons at the foot of a form keep their width and stand
   44px tall, since they end a form rather than sit in a row.

   The client portal's buttons (.pt-btn) are not listed here, and keep the
   rules above. Selectors are doubled, and the header's is scoped to nav[id],
   so these win over each page's own rules without depending on load order;
   none of them sets `display`, which the header uses to hide its button on
   small screens. */
nav[id] .nav-btn.nav-btn,
.nav-btn.nav-btn,
.btn-gold.btn-gold,
.btn-primary.btn-primary,
.sec-btn.sec-btn,
.footer-cta-btn.footer-cta-btn,
.sq-action.sq-action,
.dr-cta.dr-cta,
.sp-cta.sp-cta,
.roi-mini-btn.roi-mini-btn,
.sd-btn.sd-btn,
.pkg-cta.pkg-cta,
.sov-cta.sov-cta,
.capx-cta.capx-cta,
.tier-cta-btn.tier-cta-btn,
.phone-send.phone-send,
.btn-ghost.btn-ghost,
.sec-btn-ghost.sec-btn-ghost,
.sp-dl.sp-dl,
.audit-submit.audit-submit,
.demo-btn.demo-btn,
.mm-cta.mm-cta{
  height:auto;
  min-height:0;
  padding:7px 18px;
  font-family:var(--font-body);
  font-size:var(--fs-1);
  font-weight:var(--fw-bold);
  line-height:20px;
  letter-spacing:.14em;
  text-transform:none;
  border-radius:var(--r-pill);
}
/* the outlined twin: one pixel of its height is its border */
.btn-ghost.btn-ghost,
.sec-btn-ghost.sec-btn-ghost,
.sp-dl.sp-dl{padding:6px 17px}
/* the spec sheet's download button was the one outline the twin missed */
.sp-dl.sp-dl{
  background:linear-gradient(180deg,rgba(201,168,76,.10),rgba(201,168,76,.02));
  border:1px solid rgba(201,168,76,.42);
  color:var(--gold-bright);
  box-shadow:inset 0 1px 0 rgba(255,248,224,.10);
  cursor:pointer}
.sp-dl.sp-dl:hover{border-color:rgba(201,168,76,.75);
  background:linear-gradient(180deg,rgba(201,168,76,.16),rgba(201,168,76,.05))}
/* a row of actions lines up on its centre instead of stretching every
   button to the tallest one */
.sp-hero-actions{align-items:center}
/* the full-width ones at the foot of a form */
.audit-submit.audit-submit,
.demo-btn.demo-btn,
.mm-cta.mm-cta{padding:12px 18px}
/* the home page hero's button is half of a form control pair: beside the
   email field, or under it on a phone, it takes the field's height */
.btn-gold.btn-gold.hero-capture-btn{height:42px;padding-top:0;padding-bottom:0}

/* the finish: struck gold, with a band of light parked off its right edge */
nav[id] .nav-btn.nav-btn,
.nav-btn.nav-btn,
.btn-gold.btn-gold,
.btn-primary.btn-primary,
.sec-btn.sec-btn,
.footer-cta-btn.footer-cta-btn,
.sq-action.sq-action,
.dr-cta.dr-cta,
.sp-cta.sp-cta,
.roi-mini-btn.roi-mini-btn,
.sd-btn.sd-btn,
.pkg-cta.pkg-cta,
.sov-cta.sov-cta,
.capx-cta.capx-cta,
.tier-cta-btn.tier-cta-btn,
.phone-send.phone-send,
.audit-submit.audit-submit,
.demo-btn.demo-btn,
.mm-cta.mm-cta{
  background-color:var(--gold);
  background-image:
    linear-gradient(100deg, rgba(255,251,236,0) 38%, rgba(255,251,236,.62) 50%, rgba(255,251,236,0) 62%),
    linear-gradient(177deg, #F2DC9E 0%, #DFC273 28%, #C9A84C 66%, #AE8C32 100%);
  background-repeat:no-repeat;
  background-size:300% 100%, 100% 160%;
  background-position:95% 0, 0 0;
  color:#14100A;
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(255,250,232,.58),
    inset 0 -1px 0 rgba(84,62,10,.36),
    0 0 0 1px rgba(231,201,124,.34),
    0 1px 2px rgba(0,0,0,.42);
  transition:box-shadow var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}
nav[id] .nav-btn.nav-btn:hover,
.nav-btn.nav-btn:hover,
.btn-gold.btn-gold:hover,
.btn-primary.btn-primary:hover,
.sec-btn.sec-btn:hover,
.footer-cta-btn.footer-cta-btn:hover,
.sq-action.sq-action:hover,
.dr-cta.dr-cta:hover,
.sp-cta.sp-cta:hover,
.roi-mini-btn.roi-mini-btn:hover,
.sd-btn.sd-btn:hover,
.pkg-cta.pkg-cta:hover,
.sov-cta.sov-cta:hover,
.capx-cta.capx-cta:hover,
.tier-cta-btn.tier-cta-btn:hover,
.phone-send.phone-send:hover,
.audit-submit.audit-submit:hover,
.demo-btn.demo-btn:hover,
.mm-cta.mm-cta:hover,
nav[id] .nav-btn.nav-btn:focus-visible,
.nav-btn.nav-btn:focus-visible,
.btn-gold.btn-gold:focus-visible,
.btn-primary.btn-primary:focus-visible,
.sec-btn.sec-btn:focus-visible,
.footer-cta-btn.footer-cta-btn:focus-visible,
.sq-action.sq-action:focus-visible,
.dr-cta.dr-cta:focus-visible,
.sp-cta.sp-cta:focus-visible,
.roi-mini-btn.roi-mini-btn:focus-visible,
.sd-btn.sd-btn:focus-visible,
.audit-submit.audit-submit:focus-visible,
.demo-btn.demo-btn:focus-visible,
.mm-cta.mm-cta:focus-visible{
  opacity:1;
  transform:none;
  filter:brightness(1.05);
  background-position:5% 0, 0 100%;
  animation:orion-sheen .9s var(--ease) 1 both;
  box-shadow:
    inset 0 1px 0 rgba(255,250,232,.72),
    inset 0 -1px 0 rgba(90,68,14,.42),
    0 0 0 1px rgba(240,214,142,.55),
    0 4px 14px -5px rgba(201,168,76,.5);
}
@keyframes orion-sheen{
  from{background-position:95% 0, 0 0}
  to{background-position:5% 0, 0 100%}
}
nav[id] .nav-btn.nav-btn:active,
.nav-btn.nav-btn:active,
.btn-gold.btn-gold:active,
.btn-primary.btn-primary:active,
.sec-btn.sec-btn:active,
.footer-cta-btn.footer-cta-btn:active,
.sq-action.sq-action:active,
.dr-cta.dr-cta:active,
.sp-cta.sp-cta:active,
.roi-mini-btn.roi-mini-btn:active,
.sd-btn.sd-btn:active,
.audit-submit.audit-submit:active,
.demo-btn.demo-btn:active,
.mm-cta.mm-cta:active{
  transform:none;
  filter:brightness(.96);
  box-shadow:inset 0 1px 2px rgba(90,68,14,.5), 0 0 0 1px rgba(201,168,76,.3);
}
/* the outlined twin keeps its hairline and gains no motion: it is the second choice */
.btn-ghost.btn-ghost:hover,
.sec-btn-ghost.sec-btn-ghost:hover{transform:none}
.btn-ghost.btn-ghost:active,
.sec-btn-ghost.sec-btn-ghost:active{transform:none;background:linear-gradient(180deg,rgba(201,168,76,.2),rgba(201,168,76,.08))}

/* a keyboard always sees where it is */
nav[id] .nav-btn.nav-btn:focus-visible,
.nav-btn.nav-btn:focus-visible,
.btn-gold.btn-gold:focus-visible,
.btn-primary.btn-primary:focus-visible,
.btn-ghost.btn-ghost:focus-visible,
.sp-dl.sp-dl:focus-visible,
.sec-btn.sec-btn:focus-visible,
.sec-btn-ghost.sec-btn-ghost:focus-visible,
.footer-cta-btn.footer-cta-btn:focus-visible,
.sq-action.sq-action:focus-visible,
.dr-cta.dr-cta:focus-visible,
.sp-cta.sp-cta:focus-visible,
.roi-mini-btn.roi-mini-btn:focus-visible,
.sd-btn.sd-btn:focus-visible,
.audit-submit.audit-submit:focus-visible,
.demo-btn.demo-btn:focus-visible,
.mm-cta.mm-cta:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  nav[id] .nav-btn.nav-btn:hover,.nav-btn.nav-btn:hover,.btn-gold.btn-gold:hover,.btn-primary.btn-primary:hover,
  .sec-btn.sec-btn:hover,.footer-cta-btn.footer-cta-btn:hover,.sq-action.sq-action:hover,.dr-cta.dr-cta:hover,
  .sp-cta.sp-cta:hover,.roi-mini-btn.roi-mini-btn:hover,.sd-btn.sd-btn:hover,.audit-submit.audit-submit:hover,
  .demo-btn.demo-btn:hover,.mm-cta.mm-cta:hover,
  nav[id] .nav-btn.nav-btn:focus-visible,.nav-btn.nav-btn:focus-visible,.btn-gold.btn-gold:focus-visible,
  .btn-primary.btn-primary:focus-visible,.sec-btn.sec-btn:focus-visible,.footer-cta-btn.footer-cta-btn:focus-visible,
  .sq-action.sq-action:focus-visible,.dr-cta.dr-cta:focus-visible,.sp-cta.sp-cta:focus-visible,
  .roi-mini-btn.roi-mini-btn:focus-visible,.sd-btn.sd-btn:focus-visible,.audit-submit.audit-submit:focus-visible,
  .demo-btn.demo-btn:focus-visible,.mm-cta.mm-cta:focus-visible{
    animation:none;background-position:95% 0, 0 100%}
}