.hero-noise {
  background-image: url("../images/hero-noise.png?v=3");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(110% 95% at 50% 15%, #000 32%, transparent 100%);
  mask-image: radial-gradient(110% 95% at 50% 15%, #000 32%, transparent 100%);
}
body.admin-bar #siteHeader { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #siteHeader { top: 46px; }
}
.entry-content a { color: #8ec9ff; }
.entry-content p { margin: 0 0 1rem; }
.entry-content h2 { font-size: 1.5rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.entry-content ul { margin: 0 0 1rem 1.25rem; list-style: disc; }

/* Scroll reveal disabled — sections render immediately instead of fading in.
   The .reveal class stays in the markup (it mirrors the reference design and
   the IntersectionObserver in app.js still adds .in harmlessly), so the effect
   can be restored by deleting this block. Neutralising it here also removes a
   fragility: .reveal starts at opacity 0, so any JS failure hid the content. */
.reveal,
.reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------------------------------------------------------------------------
   Blue intensity
   ---------------------------------------------------------------------------
   Two separate causes, deliberately fixed separately.

   1. Header chrome. .glass in the compiled bundle is #0a1628 — bluer and
      lighter than the page ground (#0a1424), which makes the fixed header read
      as a band of brand colour rather than as chrome. The same colour fills the
      mobile menu panel, which covers most of a phone screen. Dialled back to a
      more neutral ink: saturation drops from ~60% to ~49% and it now sits a
      touch darker than the page, so it reads as chrome and still separates. */
.mobile-menu-panel,
.mobile-menu-secondary {
  background: #0b1420;
}

/* The bar itself is frosted rather than solid — 85% of that same ink over a
   10px backdrop blur, so the page's colour shows through only faintly as it
   scrolls beneath. Deliberately subtle: the two knobs are the alpha and the
   blur radius. The drawer above stays opaque; a translucent panel over page
   content would cost legibility. */
.glass {
  background: rgba(11, 20, 32, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 2. The hero mesh on small screens. The mesh boxes are fixed pixel sizes
      (1300×1300, 1100×1100) offset by -288px, so on a desktop they are corner
      glows but on a phone a single box covers the whole viewport and three of
      them overlap — the top of every page goes saturated blue. The bundle has
      no max-width media query at all, so there is nothing to tune.

      The per-element opacity utilities (opacity-95/75/55) are what build the
      composition, so this lowers the alpha inside the gradient instead of the
      element opacity — the layering survives, the intensity drops. Desktop is
      deliberately untouched. */
@media (max-width: 1023.98px) {
  .mesh {
    filter: blur(60px);
    background:
      radial-gradient(55% 55% at 22% 28%, rgba(28, 102, 242, 0.42), transparent 72%),
      radial-gradient(48% 48% at 78% 72%, rgba(88, 169, 255, 0.28), transparent 72%);
  }
}
/* ===========================================================================
   Mobile layout fixes
   ===========================================================================
   Context: assets/css/app.css is the demo's compiled Vite bundle and carries no
   responsive height/width/padding utilities at all — there is no lg:h-9, no
   sm:mt-28, no h-11. (Verified: the bundle's entire lg: set is 101 classes, all
   layout/type/spacing-block, none of them box sizing.) So none of the fixes
   below can be expressed as classes in the templates; they have to live here.
   Every mobile rule is inside a max-width query, so desktop is untouched.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   A. Mega-menu: take the invisible links out of the tab order    (all sizes)
   ---------------------------------------------------------------------------
   .dropdown-panel is opacity:0 + pointer-events:none when closed. opacity does
   NOT remove an element from the tab order, so every closed page has ~60
   focusable, screen-reader-visible mega-menu links between the hamburger and
   the mobile drawer. On a phone that makes the drawer unreachable by keyboard
   or switch control; on desktop it is a long invisible tab detour.

   This is the same visibility/transition pattern .mobile-menu already uses, so
   the 0.25s opacity fade-out still plays before the panel goes untabbable.
   getBoundingClientRect() is unaffected by visibility, so the dropdown's
   measuring pass in app.js keeps working, and the mobile drawer's cloneNode()
   of .dd-body is a DOM read, also unaffected. */
.dropdown-mount {
  visibility: hidden;
  transition: visibility 0s linear .3s;
}
.dropdown-mount[data-open="true"] {
  visibility: visible;
  transition: visibility 0s linear 0s;
}


@media (max-width: 1023.98px) {

  /* -------------------------------------------------------------------------
     B. Tap targets in the header
     -------------------------------------------------------------------------
     The search button and hamburger are 36px (h-9). 44px is the guideline.
     They cannot simply grow: at 360px the nav row has 312px of usable width
     (360 - px-6), the logo is shrink-0 at 232px (768x119 source at h-9), and
     the right-hand group is 80px — 312.3px needed against 312px available, i.e.
     zero slack already. Growing both buttons to 44px needs 328px, so the logo
     has to come down first. 28px is the size the drawer header already uses
     for the same logo, so it is not a new value.

     After this: 181 + 44 + 8 + 44 = 277px, comfortable at 320px and up.

     The logo is a direct child of the nav (nav > a > img); the right-hand
     group has no a > img, so nothing else can match. */
  #navBar > nav > a > img { height: 1.75rem; }

  /* The bar itself. 80px (h-20) is a desktop height; on a phone it leaves the
     44px controls swimming in it. 64px keeps them comfortably inset (10px
     above and below) and still clears the reduced 8rem hero padding by 64px.
     Nothing else assumes the mobile header height: the drawer is fixed to the
     viewport, the mega-menu is desktop-only, and the /blocks/ index rail is
     already static below 720px.

     Layout: a three-column grid with equal outer tracks, so the logo is
     centred on the viewport regardless of the hamburger on the left or the
     search (plus, from sm, the Contact button) on the right. The desktop
     menu (hidden lg:flex) is display:none here and takes no track. At 320px
     the outer tracks are still 57px each, over the 48px controls. */
  #navBar > nav {
    height: 4rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  #navBar > nav > [data-mobile-menu-open] { justify-self: start; }
  #navBar > nav > div { justify-self: end; }

  [data-search-open],
  [data-mobile-menu-open],
  button[data-mobile-menu-close] {   /* NB: scoped to button — the drawer's logo
                                        link and the backdrop also carry
                                        data-mobile-menu-close and must not be
                                        forced to a square */
    height: 3rem;
    width: 3rem;
  }

  /* Borderless on a phone: with the hamburger leading the row, a boxed pair of
     controls either side of the logo read as heavy. The search button keeps its
     border on desktop, where it is the reference design, so only the colour
     is cleared here — box-sizing is border-box, so geometry does not shift.
     Its glyph is scaled to sit with the 24px hamburger. */
  [data-search-open] { border-color: transparent; }
  [data-search-open] > svg { height: 1.25rem; width: 1.25rem; }

  /* -------------------------------------------------------------------------
     C. Tap targets inside the drawer
     -------------------------------------------------------------------------
     .mobile-nav-item is already 54px and fine. These are not:
       .mobile-back-btn          6+6+18   = 30px
       .dd-sidebar-link          8+8+19   = 35px
       .dd-item with no .dd-desc 12+12+20 = 44px only just, and 43.5px when the
                                            title is one line ("All industries",
                                            "Partners")                        */
  .mobile-back-btn { min-height: 2.75rem; padding-left: .75rem; padding-right: .875rem; }
  .mobile-secondary-body .dd-sidebar-link { min-height: 2.75rem; }
  .mobile-secondary-body .dd-item { min-height: 2.75rem; }

  /* -------------------------------------------------------------------------
     D. Drawer: keep Back reachable, and stop scroll chaining
     -------------------------------------------------------------------------
     .mobile-secondary-header is a normal child of the scrolling
     .mobile-menu-secondary, so on the Services panel (21 items, ~1365px) the
     Back button scrolls away and the only way out is Escape (no keyboard on a
     phone) or a tap on the backdrop. background-color:inherit deliberately
     tracks whatever .mobile-menu-secondary is set to, so the .glass colour fix
     above stays the single source of truth. */
  .mobile-secondary-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: inherit;
  }
  .mobile-menu-primary,
  .mobile-menu-secondary { overscroll-behavior: contain; }

  /* -------------------------------------------------------------------------
     E. Search palette: recover 48px above the fold
     -------------------------------------------------------------------------
     mt-28 is 112px, 17% of a 667px viewport. With the on-screen keyboard up
     (~290px on iOS) the palette has ~208px of visible results — about 2.5 rows.
     64px instead of 112px buys most of another row. */
  #searchPalette .mt-28 { margin-top: 4rem; }

  /* -------------------------------------------------------------------------
     F. Footer link tap targets
     -------------------------------------------------------------------------
     The column links are text-sm on a space-y-2.5 rhythm: a 20px target on a
     30px pitch. The legal links in the bottom bar are text-xs: 16px.
     The compiled space-y rule is :where(...), i.e. zero specificity, so
     zeroing its margin here is safe and keeps the net column growth to +12px
     per link rather than +22px.

     This makes each open column about 80px longer; the footer accordion
     ("Footer accordion" further down, driven by assets/js/footer-accordion.js)
     keeps the columns collapsed on phones, so that length only shows inside
     a column the visitor has opened. */
  footer ul > li > a { display: block; padding-block: .6875rem; }   /* 42px */
  footer ul > li:not(:last-child) { margin-block-end: 0; }
  footer .gap-5 > a { display: inline-block; padding-block: .8125rem; }  /* 42px */
  footer .gap-2\.5 > a { height: 2.75rem; width: 2.75rem; }         /* socials */
}


/* ---------------------------------------------------------------------------
   H. OPTIONAL — reclaim the hero's top padding on phones
   ---------------------------------------------------------------------------
   Recommended INSTEAD of shrinking the 80px header (see the report). pt-44 is
   176px; with the 80px header that leaves a 96px gap before the H1, 26% of a
   667px viewport gone before any content. 128px leaves a 48px gap, which still
   clears the header comfortably, and costs nothing anywhere else: the header
   stays 80px so wp.css's body.admin-bar offsets and blocks.css's 5rem
   .blocks-index / .specimen offsets all stay correct.

   Overriding the utility rather than the templates because pt-44 is set in
   inc/render.php, page-hero.php, legal-document.php and page-inventory.php,
   none of which one worker owns. */
@media (max-width: 1023.98px) {
  /* Keyed off the padding PAIR, not bare .pt-44, because the home hero is
     `pt-44 pb-28` and the home page is explicitly out of scope. The pairs below
     are the internal page hero (pb-16 in all three of its size variants), the
     record hero and the inventory page (pb-24), and the legal hero (pb-12). */
  .pt-44.pb-24,
  .pt-44.pb-16,
  .pt-44.pb-12 {
    padding-top: 8rem;
  }
}

/* ---------------------------------------------------------------------------
   comparison_table — give the matrix a floor so it scrolls instead of collapsing

   The block wraps its table in `overflow-x-auto`, which stops the table
   widening the page. But the table is `w-full`, and the auto table algorithm
   lays out at max(containing block, MIN). At 390px the container is 340px and
   MIN is ~342px, so every column lands on its minimum content width and the
   row-label column degenerates to one word per line.

   34rem leaves the label column ~340px and asks for ~204px of horizontal
   scroll, which is what the wrapper exists for. Above lg the table's own width
   is far above the floor, so it cannot bind — and the media query makes that
   doubly true. Keyed off the existing utilities because the bundle has no
   min-w-* able to express this and there is no Tailwind build. */
@media (max-width: 1023.98px) {
  .overflow-x-auto > table.w-full {
    min-width: 34rem;
  }
}

/* ---------------------------------------------------------------------------
   Typeface
   ---------------------------------------------------------------------------
   The compiled bundle hard-codes Inter and JetBrains Mono into --font-sans and
   --font-mono inside @layer theme. Unlayered CSS outranks layered CSS whatever
   the specificity, so redefining the two variables here is enough — every
   .font-sans, .font-mono and the body default follow, and none of the 63
   templates that use font-mono need touching.

   Plus Jakarta Sans runs a little wider than Inter at the same size, so the
   fallback stack is ordered to degrade to similarly-proportioned faces rather
   than to a condensed system font.

   font-mono carries the eyebrows, the small labels, the credential ticker and
   the layout slugs on /blocks/. It is no longer a monospace: the user found the
   typewriter look wrong for the brand, so Archivo — a plain grotesk that reads
   crisply as small tracked uppercase — takes the slot, and the fallback stack
   degrades to a sans, not to a terminal face. */
:root,
:host {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Archivo", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   Record pages and forms on a phone
   ---------------------------------------------------------------------------
   None of these are expressible as utilities: the bundle has no lg:text-sm to
   pair with text-base, and no lg:w-* at 96px to pair with w-24. */

/* Enquiry form controls: stop iOS Safari zooming the page.
   Safari zooms the viewport whenever a focused control computes under 16px,
   and header.php's viewport meta sets no maximum-scale, so the zoom sticks
   after blur and leaves the user on a horizontally panned page. The controls
   are text-sm (14px). Scoped by pointer rather than width because this is a
   touch behaviour, not a narrow-screen one — a width query would also catch a
   small desktop window, where there is no zoom to prevent.

   .text-sm's line-height is the unitless calc(1.25 / .875) = 1.4286, so 16px
   also lifts the control from 42px to 44.9px, over the 44px tap target. */
@media (hover: none) and (pointer: coarse) {
  input[name="name"],
  input[name="email"],
  input[name="company"],
  input[name="role"],
  select[name="interest"],
  textarea[name="message"] {
    font-size: 16px;
  }
}

/* Record stats figure: containment for the md/lg four-track range.
   inc/singles.php drops to one track below 640px, which covers phones. From
   768px the band is four tracks — 156px at md — and a malformed figure such as
   "AUsovereign" (287.6px measured) still spills out of a section that has no
   overflow-hidden. Only bites on text that is already overflowing; the real
   fix is the content, where value and unit are concatenated without a space. */
@media (max-width: 1279.98px) {
  .text-gradient {
    overflow-wrap: break-word;
  }
}

/* Credential ticker edge fades. w-24 a side is 192px — 49% of a 390px
   viewport, against 15% at 1280px. 40px keeps the "this scrolls" cue and gives
   the labels back most of the screen. */
@media (max-width: 1023.98px) {
  .w-24.bg-gradient-to-r.from-ink-950,
  .w-24.bg-gradient-to-l.from-ink-950 {
    width: 2.5rem;
  }
}

/* ---------------------------------------------------------------------------
   Mobile drawer opens from the left
   ---------------------------------------------------------------------------
   The hamburger now leads the header row (top-left), so the drawer comes in
   from the same side and its close button lands where the hamburger was. The
   bundle anchors .mobile-menu-panel to the right with translate(100%); this
   re-anchors the closed state only. The bundle's own open rule
   (.mobile-menu[data-open=true] .mobile-menu-panel { transform: translate(0) })
   is more specific and still wins, so the open position needs no restating.
   The shadow flips to fall onto the uncovered page, on the right. */
.mobile-menu-panel {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid #ffffff14;
  transform: translateX(-100%);
  box-shadow: 24px 0 60px -20px #000000b3;
}

/* Drawer header gutter matches the page header's px-3, so the close button
   sits exactly where the hamburger was. The bundle sets padding: 18px 20px;
   only the horizontal value changes. */
@media (max-width: 1023.98px) {
  .mobile-menu-header {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* ---------------------------------------------------------------------------
   Breadcrumb bar
   ---------------------------------------------------------------------------
   Sits under every internal page header. A very faint keyline above, the
   site's usual hairline below, and more room under the text than over it. In
   CSS because the bundle has no per-side border colours and no pt-3 to pair
   with a deeper bottom padding. */
.vx-breadcrumbs {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.vx-breadcrumbs ol {
  padding-top: 1.5rem;
  padding-bottom: 1.75rem;
}

/* ---------------------------------------------------------------------------
   Mega-menu sidebar
   ---------------------------------------------------------------------------
   The left column of each dropdown (icon, title, blurb, "All …" link) sits on
   a slightly lighter, bluer ground than the #0b1b33 card so it reads as a
   distinct panel. The mobile drawer clones this column into its submenus, so
   the shade carries through there too. */
.dd-sidebar {
  background: rgba(88, 169, 255, 0.08);
}

/* Sidebar icons: duotone (menu-icon concept C, chosen October 2026). A 34px
   drawing on a 1.4 line in light blue over a soft filled shape; the markup is
   in template-parts/ref-chrome.php. Left-aligned with the title below it. */
.dd-sidebar-icon.vx-duo { width: auto; height: auto; min-height: 40px; justify-content: flex-start; color: #8ec9ff; }
.dd-sidebar-icon.vx-duo svg { display: block; width: 34px; height: 34px; }
.dd-sidebar-icon .vx-duo-fill { color: #3086ff; opacity: .24; }

/* Mega-menu links change colour on hover instantly; the compiled bundle fades
   them over .25s, which felt laggy when moving down a column. */
.dd-item, .dd-item .dd-title, .dd-item .dd-desc { transition: none; }

/* ---------------------------------------------------------------------------
   Mega-menu width
   ---------------------------------------------------------------------------
   Every dropdown is the same width: the site container (80rem), the box the
   page rails mark out, so each panel spans the full intersection of the site
   rather than sizing to its own columns. app.js measures each panel and
   animates the card to it, so equal panel widths give a uniform card with no
   script change; heights still follow each category's content. Below 80rem the
   card runs edge to edge (the dropdown only exists from lg). The card is
   centred in the full-width mount with auto margins — it is a relative flex
   child, so they absorb the free space either side. */
@media (min-width: 64rem) {
  .dropdown-panel { width: min(80rem, 100vw); }
  .dropdown-card  { margin-inline: auto; }
}

/* Dropdown padding. With the card at the full container width there is room
   to breathe: the sidebar column and the link columns both get more inset,
   and the link columns sit further apart. Scoped to lg so the mobile drawer,
   which clones these columns into its submenus, keeps its tighter spacing. */
@media (min-width: 64rem) {
  .dd-sidebar { padding: 52px 48px; }
  .dd-cols    { padding: 52px 56px; gap: 3rem; }
}

/* The mega-menu card is frosted like the nav bar: 85% of its own ink over a
   10px backdrop blur, so the page shows through faintly. The sidebar's shade
   is now a translucent light-blue wash rather than a solid, so the glass
   reads consistently across the whole card instead of one opaque panel sat
   on a frosted one. */
.dropdown-card {
  background: rgba(11, 27, 51, 0.995);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------------------
   Horizontal rhythm
   ---------------------------------------------------------------------------
   Every section, the nav and the breadcrumb bar share the max-w-7xl container
   with px-6 lg:px-10. From lg the gutter widens from 40px to 56px so content
   sits further in from the rails, and heroes — always the first section in
   <main>, on composed pages, records, legal and home — go further still. The
   two-class selectors outrank the single utility; the hero rule follows the
   general one so it wins at equal specificity. */
@media (min-width: 64rem) {
  .max-w-7xl.mx-auto { padding-inline: 3.5rem; }
  main > section:first-child > .max-w-7xl { padding-inline: 5.5rem; }
}

/* The home hero's ribbon. Its right-[200px] / xl:right-[280px] /
   2xl:right-[380px] classes are ones the reference emits but never compiled.
   Instead its right edge is pinned to the right page rail (#pageRails: the
   80rem container, centred), so it tracks that line as the window resizes
   rather than sliding under the headline. Below 80rem the rails are hidden
   and the container is the full width, so the edge meets the window. */
@media (min-width: 64rem) { [class~="w-[820px]"] { left: auto; right: max(0px, calc((100% - 80rem) / 2)); } }

/* Desktop nav: the logo sits 40px in rather than the 56px content gutter, and
   runs a touch smaller (32px tall, was 36). The id selector outranks the
   container rule above; mobile keeps its own 28px logo and 12px gutter. */
@media (min-width: 64rem) {
  #navBar > nav { padding-left: 2.5rem; }
  #navBar > nav > a > img { height: 2rem; }
}

/* Home service sections: carry each section's card hover colour into the copy
   column. The section names its accent (vx-accent-brand / -violet / -cyan,
   the same tokens the card titles turn on hover) and, when the copy sits on
   the right, vx-copy-right. Applies to every plain pillars section
   (vx-pillars-plain): the home page and the Services index. */
.vx-accent-brand  { --vx-accent: #8ec9ff; --vx-accent-rgb: 48, 134, 255; }
.vx-accent-violet { --vx-accent: #a78bfa; --vx-accent-rgb: 167, 139, 250; }
.vx-accent-cyan   { --vx-accent: #22d3ee; --vx-accent-rgb: 34, 211, 238; }

/* A short bar in the accent above the heading. */
.vx-pillars-plain h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 9999px;
  background: var(--vx-accent);
  margin-bottom: 1.5rem;
}

/* The "Explore …" button takes the accent for its text and border. */
.vx-pillars-plain a.mt-8.inline-flex {
  color: var(--vx-accent);
  border-color: rgba(var(--vx-accent-rgb), .35);
}
.vx-pillars-plain a.mt-8.inline-flex:hover {
  border-color: rgba(var(--vx-accent-rgb), .6);
  background: rgba(var(--vx-accent-rgb), .08);
}

/* A faint accent glow behind the copy column, on whichever side it sits.
   isolation + z-index keep it under the text but above the section band. */
.vx-pillars-plain { isolation: isolate; }
.vx-pillars-plain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(640px 420px at 18% 45%, rgba(var(--vx-accent-rgb), .10), transparent 70%);
}
.vx-pillars-plain.vx-copy-right::before {
  background: radial-gradient(640px 420px at 82% 45%, rgba(var(--vx-accent-rgb), .10), transparent 70%);
}
@media (max-width: 63.98rem) {
  .vx-pillars-plain::before,
  .vx-pillars-plain.vx-copy-right::before {
    background: radial-gradient(520px 320px at 20% 12%, rgba(var(--vx-accent-rgb), .10), transparent 70%);
  }
}

/* Checklist on parchment: divide-y takes currentColor, which on ink text is
   a solid black rule; this is the 10% ink line the other light sections use. */
.vx-divide-ink > * { border-color: rgba(10, 20, 36, .1); }

/* Footer, desktop: a roomier rhythm. Column links move from a 10px to a 16px
   gap, the list sits further under its heading, the columns spread a little
   more, and the legal links in the bottom bar open up. (Phones already run
   the 42px tap-target pitch in block F above.) The compiled space-y rule is
   :where(...), so these plain selectors win. */
@media (min-width: 64rem) {
  footer ul > :not(:last-child) { margin-block-end: 1rem; }
  footer ul.mt-4 { margin-top: 1.5rem; }
  footer .grid.gap-10 { gap: 3rem; }
  footer .gap-5 { gap: 2rem; }
}

/* Footer accordion, below 64rem. assets/js/footer-accordion.js adds a
   <button> to each link column label, `vx-facc` to the grid, `vx-facc-col`
   to each column and `is-open` to the expanded ones; at 64rem and up it takes
   all of that away again, so nothing here can reach the desktop footer. With
   no script none of these classes exist and every column stays open.
   Every column spans the full width (md's two-column grid included) and the
   link columns stack as hairline-separated rows with no gap between them.
   Collapsing animates grid-template-rows 0fr/1fr; the list is visibility-
   hidden once shut so its links leave the tab order and the a11y tree. */
@media (max-width: 63.98rem) {
  footer .vx-facc { row-gap: 0; }
  footer .vx-facc > * { grid-column: 1 / -1; }
  footer .vx-facc > :not(.vx-facc-col) { margin-bottom: 2.5rem; }
  .vx-facc-col {
    display: grid;
    grid-template-rows: auto 0fr;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .vx-facc-col.is-open { grid-template-rows: auto 1fr; }
  .vx-facc-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; min-height: 3.5rem; padding: 0;
    background: none; border: 0; cursor: pointer; text-align: left;
    font: 600 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    -webkit-tap-highlight-color: transparent;
  }
  .vx-facc-btn:hover, .vx-facc-col.is-open .vx-facc-btn { color: #fff; }
  .vx-facc-btn:focus-visible { outline: 2px solid #58a9ff; outline-offset: -2px; }
  .vx-facc-icon { flex: none; width: 1rem; height: 1rem; color: rgba(255, 255, 255, .6); }
  .vx-facc-v { transform-box: fill-box; transform-origin: center; }
  .vx-facc-col.is-open .vx-facc-v { transform: rotate(90deg); }
  footer .vx-facc-col > ul { min-height: 0; overflow: hidden; margin-top: 0; visibility: hidden; }
  footer .vx-facc-col.is-open > ul { visibility: visible; }
  footer .vx-facc-col > ul > li:last-child { padding-bottom: .75rem; }
  footer .vx-facc-col > ul a:focus-visible { outline-offset: -2px; }
  /* Transitions switch on a frame after the collapsed state first paints. */
  .vx-facc-ready .vx-facc-col { transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1); }
  .vx-facc-ready .vx-facc-v { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .vx-facc-ready .vx-facc-btn { transition: color .2s ease; }
  footer .vx-facc-ready .vx-facc-col > ul { transition: visibility 0s linear .3s; }
  footer .vx-facc-ready .vx-facc-col.is-open > ul { transition-delay: 0s; }
}
@media (max-width: 63.98rem) and (prefers-reduced-motion: reduce) {
  .vx-facc-ready .vx-facc-col,
  .vx-facc-ready .vx-facc-v,
  .vx-facc-ready .vx-facc-btn,
  footer .vx-facc-ready .vx-facc-col > ul { transition: none; }
}

/* Record overview: copy in the left half of the container, a photograph
   filling the right half of the section edge to edge. On phones the
   photograph follows the copy at a fixed height. */
.vx-overview-media { position: relative; height: 16rem; }
.vx-overview-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64rem) {
  /* The media takes the right 42%, leaving more parchment around the copy,
     and the copy column stacks above it, so
     text is never covered. The parchment then fades into the photograph on
     a slight slant over its first ~44%, so the two meet on a soft diagonal
     rather than a hard vertical cut. */
  .vx-overview-media { position: absolute; top: 0; bottom: 0; right: 0; width: 56%; height: auto; z-index: 0; }
  /* Copy takes 45% of the container, the photograph the right 56% of the
     section, with a long fade so the clear image starts near the midline. */
  .vx-overview > .max-w-7xl { z-index: 1; grid-template-columns: 9fr 11fr; }
  .vx-overview-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* On a slanted gradient the bottom-left corner sits ~20% along the
       gradient line, so the parchment stays solid to 26% or the image shows
       through at the edge and reads as a cut. */
    background: linear-gradient(100deg, #eeece7 0%, #eeece7 24%, rgba(238, 236, 231, .6) 40%, rgba(238, 236, 231, 0) 64%);
    pointer-events: none;
  }
}

/* A dot-grid motif in the photograph's top-right corner, dissolving towards
   the centre so it reads as a detail rather than a stamp. */
.vx-overview-media::before {
  content: "";
  position: absolute;
  top: 3rem;
  right: 3rem;
  width: 15rem;
  height: 15rem;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .75) 1.3px, transparent 1.9px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(circle at 100% 0%, #000 20%, transparent 72%);
}
@media (max-width: 63.98rem) {
  .vx-overview-media::before { width: 10rem; height: 10rem; top: 2rem; right: 2rem; }
}

/* Contact form section: the hero's breadcrumbs sit directly above it, so give
   the form and the channel cards room below that bar. */
.vx-contact-form { padding-top: 3.5rem; }
@media (min-width: 64rem) { .vx-contact-form { padding-top: 7rem; } }

/* Keyline grid — the light sections' card style. Flat cells share 1px rules
   instead of floating as raised cards: each cell draws a full border and
   overlaps its neighbour by 1px, so rules never double and a short last row
   simply ends. Text sits at the top of each cell; a linked cell's foot cue is
   pushed to the bottom so the cues line up across a row. */
.vx-keyline { gap: 0; padding: 0 1px 1px 0; }
.vx-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 -1px -1px 0;
  padding: 2rem;
  border: 1px solid rgba(10, 20, 36, .14);
  background: rgba(248, 247, 244, .35);
  color: inherit;
  transition: background-color .3s;
}
a.vx-cell:hover { background: rgba(248, 247, 244, .9); }
@media (min-width: 64rem) { .vx-cell { padding: 2.25rem; } }
.vx-cell-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(10, 20, 36, .5);
}
.vx-cell-foot svg { color: rgba(10, 20, 36, .35); transition: transform .3s, color .3s; }
a.vx-cell:hover .vx-cell-foot svg { transform: translateX(4px); color: #1d5fd1; }
a.vx-cell:hover h3 { color: #1d5fd1; }

/* Keyline grid on the ink ground: same geometry as the light version, with
   white hairlines and a barely-there fill. */
.vx-keyline-dark > .vx-cell { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); }

/* Page body shares the hero's gutter: on desktop every container inside
   <main> (the breadcrumbs included) sits 88px in, so section copy, cards and
   breadcrumbs all line up under the hero text. Nav and footer keep 56px. */
@media (min-width: 64rem) {
  main .max-w-7xl.mx-auto { padding-inline: 5.5rem; }
}

/* Final call to action: the copy column drops its own left inset so
   "Start with a conversation." lines up with the rest of the page body. On
   phones the stacked form does the same on both sides. */
.vx-cta-copy { padding-left: 0; }
@media (max-width: 63.98rem) { .vx-cta-form { padding-left: 0; padding-right: 0; } }

/* Footer, desktop: the logo and company blurb sit a little further in, with
   more room between them and the first link column. */
@media (min-width: 64rem) {
  footer .lg\:col-span-4 { padding-left: 1.5rem; padding-right: 3rem; }
}

/* Related products & services: the Vectra diamond as a faint watermark,
   large on the left and dropped low so its bottom point runs off the
   section. The cells here are opaque so the mark sits behind them, never
   showing through. */
.vx-related::before {
  content: "";
  position: absolute;
  left: -5rem;
  bottom: -9rem;
  width: 44rem;
  aspect-ratio: 368 / 228;
  background: url("../images/vectra-mark.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.vx-related .vx-cell { background: #f1f0ec; }
.vx-related a.vx-cell:hover { background: #f7f6f3; }
@media (max-width: 63.98rem) {
  .vx-related::before { width: 26rem; left: -5rem; bottom: -5rem; }
}

/* Desktop nav, full-bleed variant: the bar spans the viewport, the logo sits
   near the left edge, and search + Contact become full-height blocks with
   Contact flush against the right edge. Mobile keeps its own grid header. */
@media (min-width: 64rem) {
  /* Three tracks, the outer two equal, so the menu sits at the true centre
     of the bar whatever the logo and button widths. */
  #navBar > nav { max-width: none; padding-left: 2rem; padding-right: 0; display: grid; grid-template-columns: 1fr auto 1fr; }
  #navBar > nav > a { justify-self: start; }
  #navBar > nav > div { justify-self: end; }
  #navBar > nav > div { align-self: stretch; align-items: stretch; gap: 0; }
  #navBar > nav > div > [data-search-open] {
    height: auto;
    width: auto;
    padding-inline: 1.75rem;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
  }
  #navBar > nav > div > [data-search-open]:hover { background: rgba(255, 255, 255, .05); }
  #navBar > nav > div > a.btn-primary {
    height: auto;
    border-radius: 0;
    padding-inline: 2rem;
    font-size: .9375rem;
    /* No glow or lift: as a full-height block the glow spilled below the bar. */
    box-shadow: none;
  }
  #navBar > nav > div > a.btn-primary:hover { box-shadow: none; transform: none; }
}

/* A very soft shadow under the nav bar so it lifts off the page. */
#navBar { box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }

/* Compact header once the page is scrolled (assets/js/nav-scroll.js adds
   .is-scrolled): the bar eases from 80px to 64px on desktop and from 64px
   to 56px on phones. Full-height search and Contact follow the bar. */
#navBar > nav { transition: height .25s ease; }
#siteHeader.is-scrolled #navBar > nav { height: 4rem; }
@media (max-width: 63.98rem) {
  #siteHeader.is-scrolled #navBar > nav { height: 3.5rem; }
}

/* Office grid: dark keyline cells with a photo on top. The HQ cell spans two
   tracks from md. Photos are toned toward the ink ground so the set reads as
   one family, and ease up a touch on hover. */
.vx-offices > .vx-office { padding: 0; overflow: hidden; }
@media (min-width: 48rem) { .vx-offices > .vx-office-hq { grid-column: span 2; } }
.vx-office-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vx-office-hq .vx-office-media { aspect-ratio: auto; height: 100%; max-height: none; }
@media (min-width: 48rem) { .vx-office-hq { flex-direction: row; } .vx-office-hq .vx-office-media { width: 50%; flex: none; } }
.vx-office-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.85); transition: transform .6s ease, filter .6s ease; }
.vx-office-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 36, 0) 45%, rgba(10, 20, 36, .55) 100%); pointer-events: none; }
.vx-office:hover .vx-office-media img { transform: scale(1.03); filter: saturate(1) brightness(.95); }
.vx-office-body { padding: 1.75rem; }
@media (min-width: 64rem) { .vx-office-body { padding: 2rem; } }

/* Contact form section on parchment: the section turns light, the form and
   the channel cards become raised pale panels, and every dark-ground text,
   input and link colour inside is mapped to its ink equivalent. */
.vx-contact-form { background: #eeece7; color: #0a1424; padding-bottom: 5rem; }
@media (min-width: 64rem) { .vx-contact-form { padding-bottom: 8.5rem; } }
.vx-contact-form .rounded-md.border {
  background: #f8f7f4;
  border-color: rgba(10, 20, 36, .12);
  box-shadow: 0 1px 2px rgba(10, 20, 36, .05), 0 12px 32px -18px rgba(10, 20, 36, .25);
}
.vx-contact-form h2, .vx-contact-form h3, .vx-contact-form .text-white { color: #0a1424; }
.vx-contact-form [class*="text-white/"] { color: rgba(10, 20, 36, .68); }
.vx-contact-form a[class*="text-white"]:hover, .vx-contact-form a:hover { color: #0a1424; }
.vx-contact-form .text-brand-300 { color: #1d5fd1; }
.vx-contact-form .text-violet-accent { color: #6d4fd6; }
.vx-contact-form .text-cyan-accent { color: #0e7490; }
.vx-contact-form input:not([type="checkbox"]):not([type="hidden"]),
.vx-contact-form select,
.vx-contact-form textarea {
  background: #fff;
  border-color: rgba(10, 20, 36, .16);
  color: #0a1424;
}
.vx-contact-form input:focus, .vx-contact-form select:focus, .vx-contact-form textarea:focus { background: #fff; border-color: #3086ff; }
.vx-contact-form input::placeholder, .vx-contact-form textarea::placeholder { color: rgba(10, 20, 36, .4); }
.vx-contact-form option { background: #fff; color: #0a1424; }
.vx-contact-form input[type="checkbox"] { border-color: rgba(10, 20, 36, .3); background: #fff; }
.vx-contact-form svg[class*="text-white"] { color: rgba(10, 20, 36, .45); }

/* Contact form section: the Vectra diamond watermark, bottom right, its point
   running off the section edge. The content wrapper is positioned so it
   stacks above the mark. */
.vx-contact-form { overflow: hidden; }
.vx-contact-form > div { position: relative; }
.vx-contact-form::before {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -9rem;
  width: 44rem;
  aspect-ratio: 368 / 228;
  background: url("../images/vectra-mark.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
@media (max-width: 63.98rem) {
  .vx-contact-form::before { width: 26rem; right: -5rem; bottom: -5rem; }
}

/* Section headings capped at 60% of the content width on desktop (container
   80rem less the 5.5rem body gutters). */
@media (min-width: 64rem) {
  .vx-h60 { max-width: calc((min(100vw, 80rem) - 11rem) * .6); }
}

/* Linked cells on the ink ground: white-toned arrow and a faint lift. */
.vx-keyline-dark .vx-cell-foot svg { color: rgba(255, 255, 255, .35); }
.vx-keyline-dark a.vx-cell:hover { background: rgba(255, 255, 255, .05); }
.vx-keyline-dark a.vx-cell:hover h3 { color: #8ec9ff; }
.vx-keyline-dark a.vx-cell:hover .vx-cell-foot svg { color: #8ec9ff; }

/* ===========================================================================
   Block system for the content migration (docs/BLOCK-PATTERNS.md). Only what
   the compiled bundle cannot express: it has no five-column grid, no
   typography plugin, no per-side colour utilities, and the accent tokens are
   tuned for the ink ground.
   ======================================================================== */

/* Five-up keyline row (a five-step process, five logos). */
@media (min-width: 64rem) {
  .vx-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* A centred section head: its lead is max-w-2xl, so centre that too. */
.vx-center-lead p { margin-left: auto; margin-right: auto; }

/* Accent tokens on parchment. vectra_accent() hands out the pale ink-ground
   shades; inside a light catalogue section they map to the darker shades
   the other light sections use, so eyebrows, chips, hover titles and hover
   rules keep their contrast. The resting rule is a 14% ink line. */
.vx-on-light .text-brand-300,
.vx-on-light .text-brand-300\/80 { color: #1d5fd1; }
.vx-on-light .text-violet-accent { color: #6d4fd6; }
.vx-on-light .text-cyan-accent { color: #0e7490; }
.vx-on-light .group:hover .group-hover\:text-brand-300,
.vx-on-light .group:hover .group-hover\:text-brand-400 { color: #1d5fd1; }
.vx-on-light .group:hover .group-hover\:text-violet-accent { color: #6d4fd6; }
.vx-on-light .group:hover .group-hover\:text-cyan-accent { color: #0e7490; }
.vx-on-light .group:hover .group-hover\:bg-brand-300 { background-color: #3086ff; }
.vx-on-light .group:hover .group-hover\:bg-violet-accent { background-color: #6d4fd6; }
.vx-on-light .group:hover .group-hover\:bg-cyan-accent { background-color: #0e7490; }
.vx-rule-ink { background-color: rgba(10, 20, 36, .14); }

/* Keyline cell variants. lift: the outcome column of a light comparison.
   ink: a featured plan on parchment, drawn on the ink ground. lift-dark: a
   featured plan on the ink ground. */
.vx-keyline > .vx-cell-lift { background: #fbfaf8; }
.vx-keyline > .vx-cell-ink { background: #0a1424; border-color: #0a1424; color: #fff; }
.vx-keyline-dark > .vx-cell-lift-dark { background: rgba(48, 134, 255, .07); border-color: rgba(255, 255, 255, .2); }

/* Comparison table on parchment: a paler ground and a faint header fill. */
.vx-table-light { background: rgba(248, 247, 244, .7); }
.vx-table-light thead tr { background: rgba(10, 20, 36, .035); }

/* Page hero with a logo: copy beside a pale tile holding the partner's mark,
   so a logo drawn for a white page reads on the ink hero. On phones the tile
   follows the copy at a smaller size. */
.vx-hero-split { display: grid; gap: 2.5rem; }
.vx-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 18rem;
  aspect-ratio: 16 / 9;
  padding: 1.5rem 2rem;
  background: #f8f7f4;
}
.vx-hero-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 4.5rem; object-fit: contain; }
@media (min-width: 64rem) {
  .vx-hero-split { grid-template-columns: minmax(0, 1fr) 20rem; align-items: center; gap: 4rem; }
  .vx-hero-logo { max-width: none; aspect-ratio: 4 / 3; padding: 2.5rem; }
  .vx-hero-logo img { max-height: 7rem; }
}

/* Prose: long-form body copy. The bundle's preflight strips list styles and
   margins, and there is no typography plugin, so the rhythm lives here. */
.vx-prose { max-width: 46rem; font-size: 1rem; line-height: 1.75; }
@media (min-width: 64rem) { .vx-prose { font-size: 1.0625rem; } }
.vx-prose > * + * { margin-top: 1.25em; }
.vx-prose > :first-child { margin-top: 0; }
.vx-prose h3 { margin-top: 2.25em; font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.vx-prose h4 { margin-top: 2em; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.vx-prose h3 + *, .vx-prose h4 + * { margin-top: .75em; }
.vx-prose ul, .vx-prose ol { padding-left: 1.4em; }
.vx-prose ul { list-style: disc; }
.vx-prose ol { list-style: decimal; }
.vx-prose li + li { margin-top: .5em; }
.vx-prose li > ul, .vx-prose li > ol { margin-top: .5em; }
.vx-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vx-prose strong { font-weight: 600; }
.vx-prose blockquote { padding-left: 1.25rem; border-left: 2px solid #3086ff; font-size: 1.125em; }
.vx-prose-light { color: rgba(10, 20, 36, .78); }
.vx-prose-light h3, .vx-prose-light h4, .vx-prose-light strong { color: #0a1424; }
.vx-prose-light a { color: #1d5fd1; }
.vx-prose-light li::marker { color: #3086ff; }
.vx-prose-dark { color: rgba(255, 255, 255, .75); }
.vx-prose-dark h3, .vx-prose-dark h4, .vx-prose-dark strong { color: #fff; }
.vx-prose-dark a { color: #8ec9ff; }
.vx-prose-dark li::marker { color: #8ec9ff; }

/* Split list: the statement set off under the copy by a brand rule. */
.vx-callout { padding-left: 1.25rem; border-left: 2px solid #3086ff; }

/* Media split, cover fit: the record overview (vx-overview above) mirrored
   and retinted. The fade into the photograph has to match the ground, so the
   cool parchment and the ink ground each carry their own gradient, and the
   left-hand version runs it the other way. */
@media (min-width: 64rem) {
  .vx-overview-cool .vx-overview-media::after {
    background: linear-gradient(100deg, #f8f7f4 0%, #f8f7f4 24%, rgba(248, 247, 244, .6) 40%, rgba(248, 247, 244, 0) 64%);
  }
  .vx-overview-dark .vx-overview-media::after {
    background: linear-gradient(100deg, #0a1424 0%, #0a1424 24%, rgba(10, 20, 36, .6) 40%, rgba(10, 20, 36, 0) 64%);
  }
  .vx-overview-left .vx-overview-media { right: auto; left: 0; }
  .vx-overview-left > .max-w-7xl { grid-template-columns: 11fr 9fr; }
  .vx-overview-left > .max-w-7xl > div { grid-column: 2; }
  .vx-overview-left .vx-overview-media::after {
    background: linear-gradient(260deg, #eeece7 0%, #eeece7 24%, rgba(238, 236, 231, .6) 40%, rgba(238, 236, 231, 0) 64%);
  }
  .vx-overview-left.vx-overview-cool .vx-overview-media::after {
    background: linear-gradient(260deg, #f8f7f4 0%, #f8f7f4 24%, rgba(248, 247, 244, .6) 40%, rgba(248, 247, 244, 0) 64%);
  }
  .vx-overview-left.vx-overview-dark .vx-overview-media::after {
    background: linear-gradient(260deg, #0a1424 0%, #0a1424 24%, rgba(10, 20, 36, .6) 40%, rgba(10, 20, 36, 0) 64%);
  }
}
.vx-overview-left .vx-overview-media::before {
  right: auto;
  left: 3rem;
  -webkit-mask-image: radial-gradient(circle at 0% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(circle at 0% 0%, #000 20%, transparent 72%);
}

/* Media split, contain fit: the whole image on a flat keyline panel. */
.vx-media-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2rem;
  border: 1px solid rgba(10, 20, 36, .14);
  background: rgba(248, 247, 244, .6);
}
.vx-media-panel-dark { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.vx-media-panel img { display: block; width: auto; height: auto; max-width: 100%; max-height: 28rem; object-fit: contain; }
@media (min-width: 64rem) { .vx-media-panel { min-height: 22rem; padding: 3rem; } }

/* Logo grid: logos scaled into a fixed-height box so marks of different
   proportions line up; a logo-only cell centres its mark. On the ink ground
   each colour logo gets a pale tile; `mono` flattens every mark to one ink
   (light) or white (dark) silhouette instead. */
.vx-logo { display: flex; align-items: center; height: 3.5rem; }
.vx-logo { min-width: 0; max-width: 100%; }
.vx-logo img { display: block; width: auto; height: auto; max-width: min(11rem, 100%); max-height: 100%; object-fit: contain; }
.vx-logo-only { align-items: center; justify-content: center; }
.vx-logo-only .vx-logo { justify-content: center; height: 4rem; }
.vx-logos-tiled .vx-logo { justify-content: center; height: 4.5rem; padding: .625rem 1rem; background: #f8f7f4; }
.vx-logos-mono .vx-logo img { filter: brightness(0); opacity: .72; }
/* Large logos (logo_size): tall marks such as accreditation badges. */
.vx-logos-lg .vx-logo, .vx-logos-lg .vx-logo-only .vx-logo { height: 5.25rem; }
.vx-logos-lg.vx-logos-tiled .vx-logo { height: 6.25rem; }
.vx-logos-mono-dark .vx-logo img { filter: brightness(0) invert(1); opacity: .8; }

/* Statement: a pull statement on the ink ground with the Vectra diamond as a
   faint watermark (the mark is drawn in ink, so it is inverted here), and a
   figure column beside the statement from lg. */
.vx-statement::before {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -9rem;
  width: 44rem;
  aspect-ratio: 368 / 228;
  background: url("../images/vectra-mark.svg") no-repeat center / contain;
  filter: invert(1);
  opacity: .04;
  pointer-events: none;
}
@media (max-width: 63.98rem) {
  .vx-statement::before { width: 26rem; right: -5rem; bottom: -5rem; }
}
.vx-statement-grid { display: grid; gap: 2.5rem; }
.vx-statement-stat { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 64rem) {
  .vx-statement-grid { grid-template-columns: minmax(0, 1fr) 16rem; align-items: end; gap: 4rem; }
}

/* Inner page heroes: the lead and supporting line under the title stop at
   half the content width on desktop (the hero container is 80rem wide with
   5.5rem gutters). The home hero is separate and unaffected. */
@media (min-width: 64rem) {
  .vx-hero-lead { max-width: calc((min(100vw, 80rem) - 11rem) / 2); }
}

/* ---------------------------------------------------------------------------
   Process track (record methodology). Numbered nodes joined by a line: one
   row on desktop (--cols set inline), a vertical track below it. Static, it
   reads complete; assets/js/process.js adds .is-animated and walks
   .is-active / .is-done along the steps while the track is on screen.
   --------------------------------------------------------------------------- */
.vx-process { list-style: none; padding: 0; display: grid; row-gap: 2.25rem; }
.vx-step { position: relative; padding-left: 3.75rem; transition: opacity .5s ease; }
.vx-step-head { position: absolute; left: 0; top: 0; bottom: -2.25rem; width: 2.5rem; }
.vx-node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  font: 600 14px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  color: #3086ff; background: #f8f7f4;
  border: 1.5px solid #3086ff;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.vx-track { position: absolute; left: calc(50% - 1px); top: 2.75rem; bottom: .25rem; width: 2px; background: rgba(10, 20, 36, .1); overflow: hidden; }
.vx-fill { display: block; width: 100%; height: 100%; background: #3086ff; opacity: .45; transform-origin: top; }
.vx-step-end .vx-track { display: none; }
.vx-step h3 { padding-top: .45rem; transition: color .35s ease; }

@media (min-width: 64rem) {
  .vx-process { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); column-gap: 2rem; row-gap: 3.5rem; }
  .vx-step { padding-left: 0; }
  .vx-step-head { position: relative; bottom: auto; width: auto; height: 2.5rem; margin-bottom: 1.5rem; }
  .vx-track { left: 3.25rem; right: -1.25rem; top: calc(50% - 1px); bottom: auto; width: auto; height: 2px; }
  .vx-fill { transform-origin: left; }
  .vx-step h3 { padding-top: 0; }
}

/* Animated states. */
.vx-process.is-animated .vx-step { opacity: .5; }
.vx-process.is-animated .vx-step.is-done,
.vx-process.is-animated .vx-step.is-active { opacity: 1; }
.vx-process.is-animated .vx-node { color: rgba(10, 20, 36, .5); border-color: rgba(10, 20, 36, .18); }
.vx-process.is-animated .is-done .vx-node { color: #3086ff; border-color: #3086ff; }
.vx-process.is-animated .is-active .vx-node {
  color: #fff; background: #3086ff; border-color: #3086ff;
  box-shadow: 0 0 0 6px rgba(48, 134, 255, .14), 0 8px 22px -8px rgba(48, 134, 255, .7);
  animation: vx-node-pulse 1.9s ease-out infinite;
}
.vx-process.is-animated .is-active h3 { color: #1c66f2; }
.vx-process.is-animated .vx-fill { opacity: 1; transform: scaleY(0); transition: transform .3s ease; }
.vx-process.is-animated .is-done .vx-fill { transform: scaleY(1); }
.vx-process.is-animated .is-active .vx-fill { transform: scaleY(1); transition: transform 1.9s cubic-bezier(.45, 0, .25, 1); }
@media (min-width: 64rem) {
  .vx-process.is-animated .vx-fill { transform: scaleX(0); }
  .vx-process.is-animated .is-done .vx-fill,
  .vx-process.is-animated .is-active .vx-fill { transform: scaleX(1); }
}
@keyframes vx-node-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(48, 134, 255, .35), 0 8px 22px -8px rgba(48, 134, 255, .7); }
  70%  { box-shadow: 0 0 0 12px rgba(48, 134, 255, 0), 0 8px 22px -8px rgba(48, 134, 255, .7); }
  100% { box-shadow: 0 0 0 0 rgba(48, 134, 255, 0), 0 8px 22px -8px rgba(48, 134, 255, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .vx-process .vx-node { animation: none !important; }
}

/* Faint background photo in one light section of a long page (see
   assets/js/accent-bg.js): anchored left, toned down to a texture and faded
   out before it reaches the copy. Content stacks above it. */
.vx-accent-photo {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 46%;
  background-size: cover;
  background-position: center;
  opacity: .16;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 45%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 45%, transparent 100%);
  pointer-events: none;
}
.vx-accent-photo.is-inverted { filter: grayscale(1) invert(1) contrast(1.15); opacity: .22; }
.has-accent-photo > :not(.vx-accent-photo) { position: relative; }
.has-accent-photo > [aria-hidden="true"]:not(.vx-accent-photo) { position: absolute; }

/* The same dot grid as the overview
   photograph, in brand blue, gathered into the bottom-left corner. */
.has-accent-photo::after {
  content: "";
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  width: 15rem;
  height: 15rem;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(28, 102, 242, .72) 1.3px, transparent 1.9px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 20%, transparent 72%);
  mask-image: radial-gradient(circle at 0% 100%, #000 20%, transparent 72%);
}


/* ---------------------------------------------------------------------------
   Search modal (#searchPalette, driven by assets/js/search.js).
   --------------------------------------------------------------------------- */
.vx-search { position: fixed; inset: 0; z-index: 70; }
.vx-search.hidden { display: none; }
.vx-search-backdrop { position: absolute; inset: 0; background: rgba(6, 12, 22, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vx-search-panel {
  position: relative; display: flex; flex-direction: column;
  width: min(40rem, calc(100% - 2rem)); max-height: min(38rem, 76vh);
  margin: 12vh auto 0;
  background: #0d1a2c; border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8);
  overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.99); transition: opacity .18s ease, transform .18s ease;
}
.vx-search.is-open .vx-search-panel { opacity: 1; transform: none; }
.vx-search-bar { display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vx-search-glass { width: 1.15rem; height: 1.15rem; color: rgba(255, 255, 255, .4); flex: none; }
.vx-search-bar input {
  flex: 1; min-width: 0; padding: 1.15rem 0; background: transparent; border: 0; outline: 0;
  font: 400 1.0625rem/1.4 var(--font-sans); color: #fff;
}
.vx-search-bar input::placeholder { color: rgba(255, 255, 255, .35); }
.vx-search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vx-search.is-loading .vx-search-glass { animation: vx-search-pulse 1s ease-in-out infinite; }
@keyframes vx-search-pulse { 50% { color: #8ec9ff; } }
.vx-search-esc, .vx-search-foot kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px;
  font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.vx-search-close { display: none; background: none; border: 0; padding: .5rem 0 .5rem .5rem; font: 600 14px/1 var(--font-sans); color: #8ec9ff; cursor: pointer; }
.vx-search-results { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0 .75rem; }
.vx-search-label { margin: 0; padding: .9rem 1.25rem .4rem; font: 600 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.vx-sr, .vx-search-quick a {
  display: block; padding: .7rem 1.25rem .7rem calc(1.25rem - 2px);
  border-left: 2px solid transparent; text-decoration: none; color: inherit;
  transition: background-color .12s ease, border-color .12s ease;
}
.vx-sr.is-active, .vx-search-quick a.is-active, .vx-search-quick a:hover { background: rgba(255, 255, 255, .05); border-left-color: #58a9ff; }
.vx-sr:focus-visible, .vx-search-quick a:focus-visible, .vx-search-close:focus-visible { outline: 2px solid #58a9ff; outline-offset: -2px; }
.vx-sr-title { display: block; font: 600 .95rem/1.35 var(--font-sans); color: #fff; }
.vx-sr-title mark { background: none; color: #8ec9ff; }
.vx-sr-blurb {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .2rem; font-size: .8125rem; line-height: 1.5; color: rgba(255, 255, 255, .55);
}
.vx-search-quick { list-style: none; margin: 0; padding: 0; }
.vx-search-quick a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font: 500 .95rem/1.35 var(--font-sans); color: rgba(255, 255, 255, .85); }
.vx-search-quick em { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .35); }
.vx-search-none { padding: 2.25rem 1.5rem; text-align: center; }
.vx-search-none-title { margin: 0; font: 600 1rem/1.4 var(--font-sans); color: #fff; }
.vx-search-none-help { margin: .5rem auto 0; max-width: 26rem; font-size: .875rem; line-height: 1.55; color: rgba(255, 255, 255, .55); }
.vx-search-none-help a { color: #8ec9ff; }
.vx-search-error { padding: 2rem 1.5rem; text-align: center; }
.vx-search-foot {
  display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02);
  font: 500 11px/1 var(--font-sans); color: rgba(255, 255, 255, .4);
}
.vx-search-foot span { display: inline-flex; align-items: center; gap: .3rem; }
.vx-search-count { margin-left: auto; }
@media (max-width: 47.98rem) {
  .vx-search-panel { width: 100%; max-height: none; height: 100%; margin: 0; border: 0; border-radius: 0; }
  .vx-search-esc, .vx-search-foot { display: none; }
  .vx-search-close { display: block; }
  .vx-search-bar { padding-top: env(safe-area-inset-top, 0px); }
}
@media (prefers-reduced-motion: reduce) { .vx-search-panel { transition: none; } .vx-search.is-loading .vx-search-glass { animation: none; } }

/* Line-art section icon (split catalogue `icon` field), above the heading
   and, on the home page, above the accent bar. */
.vx-section-icon { display: block; margin-bottom: 1.5rem; }
.vx-section-icon .vx-line-icon { display: block; width: 4rem; height: 4rem; opacity: .95; stroke-width: 1.25; }
@media (min-width: 64rem) { .vx-section-icon .vx-line-icon { width: 5rem; height: 5rem; } }

/* Services mega menu: five labelled columns (the bundle has no grid-cols-5). */
.vx-dd-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Seven top-level menu items: tighten the bar on smaller laptops so the logo
   and Contact keep their room. Full spacing returns at 1440px. */
@media (min-width: 64rem) and (max-width: 89.98rem) {
  .nav-trigger { padding: .625rem .7rem; gap: .3rem; }
  #navBar > nav { padding-left: 1.5rem; }
  #navBar > nav > div > [data-search-open] { padding-inline: 1.25rem; }
  #navBar > nav > div > a.btn-primary { padding-inline: 1.5rem; }
}
@media (min-width: 64rem) and (max-width: 79.98rem) {
  .nav-trigger { padding: .5rem .45rem; font-size: .875rem; gap: .2rem; }
  #navBar > nav > a > img { height: 1.625rem; }
  #navBar > nav { padding-left: 1.25rem; }
  #navBar > nav > div > [data-search-open] { padding-inline: 1rem; }
  #navBar > nav > div > a.btn-primary { padding-inline: 1.15rem; font-size: .875rem; }
}
@media (min-width: 64rem) and (max-width: 71.98rem) {
  .nav-trigger { padding: .5rem .35rem; font-size: .84rem; }
  .nav-trigger .chev { width: .6rem; height: .6rem; }
  #navBar > nav > a > img { height: 1.45rem; }
  #navBar > nav { padding-left: 1rem; }
}

/* Animated gradient text (.text-gradient): the bundle's gradient runs from
   #8ec9ff to #fff, so where one 200%-wide tile meets the next the colour
   jumps and a hard edge sweeps across the text. Ending on the colour it
   starts with makes the tile loop seamlessly; the palette is unchanged. */
.text-gradient {
  background-image: linear-gradient(100deg, #8ec9ff 0%, #fff 22%, #c4b5fd 48%, #22d3ee 74%, #8ec9ff 100%);
  background-size: 200% 100%;
}

/* Framework sources: title on the left, links in a row on the right. */
.vx-sources { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 2.5rem; row-gap: .75rem; }
.vx-sources > h2 { margin: 0; flex: none; }
.vx-sources > ul { display: flex; flex: 1 1 16rem; flex-wrap: wrap; justify-content: flex-end; gap: .65rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.vx-sources > ul > li { margin: 0; }

/* Copyright bar matches the navbar chrome. */
footer > .border-t { background: #0b1420; }

/* Footer, phones and tablets: the logo, company blurb, LinkedIn link and the
   copyright/legal bar are centred, and the footer body keeps less padding
   under the menu rows so the bottom bar follows them closely. The menu rows
   themselves keep their label-left, plus-right layout. */
@media (max-width: 63.98rem) {
  footer > .max-w-7xl { padding-top: 4rem; padding-bottom: 2rem; }
  footer [data-footer-acc] > :first-child { text-align: center; }
  footer [data-footer-acc] > :first-child img { margin-inline: auto; }
  footer [data-footer-acc] > :first-child p { margin-inline: auto; }
  footer [data-footer-acc] > :first-child .flex { justify-content: center; }
  footer > .border-t > .max-w-7xl {
    flex-direction: column; justify-content: center; text-align: center;
    gap: .25rem; padding-top: 1.5rem; padding-bottom: 1rem;
  }
  footer > .border-t > .max-w-7xl > .flex { justify-content: center; }
}

/* Step cards: an optional line icon above each card's title, in the accent
   colour (text-brand-600 on parchment, brand-300 on ink). */
.vx-cell-icon { margin-bottom: 1.5rem; }
.vx-cell-icon .vx-line-icon { display: block; width: 2.75rem; height: 2.75rem; stroke-width: 1.4; }
@media (min-width: 64rem) { .vx-cell-icon .vx-line-icon { width: 3rem; height: 3rem; } }

/* Breadcrumb bar with a note at its right end (the legal pages' "Last
   updated" date): trail on the left, plain text on the far right, sharing
   the trail's padding so both sit on one line. Wraps under the trail on
   narrow screens. */
.vx-crumbs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 2rem; }
.vx-crumbs-row > .vx-crumbs-aside { margin: 0; }
@media (min-width: 48rem) { .vx-crumbs-row > .vx-crumbs-aside { padding-block: 1.5rem 1.75rem; } }
@media (max-width: 47.98rem) {
  .vx-crumbs-row > ol { padding-bottom: .5rem; }
  .vx-crumbs-row > .vx-crumbs-aside { width: 100%; padding-bottom: 1.5rem; }
}

/* Logo grid on phones: two narrow columns, so the cells take less padding
   and each logo is held inside its cell (it scales down rather than running
   into the next one, including with enlarged phone text sizes). */
@media (max-width: 47.98rem) {
  .vx-cell:has(> .vx-logo) { padding: 1.25rem; }
  .vx-cell > .vx-logo { height: 2.75rem; }
  .vx-logos-lg .vx-cell > .vx-logo { height: 4rem; }
}

/* Partner logo above the heading of the first light section (handed on
   from the hero; see vectra_section_logo_print in inc/render.php). Full
   colour, no tile. Height and width caps keep tall marks and long
   wordmarks at a similar visual weight. */
.vx-section-logo { margin-bottom: 2rem; }
.vx-section-logo img { display: block; width: auto; height: auto; max-height: 3rem; max-width: min(14rem, 100%); object-fit: contain; object-position: left center; }
@media (min-width: 64rem) {
  .vx-section-logo { margin-bottom: 2.5rem; }
  .vx-section-logo img { max-height: 3.5rem; max-width: 16rem; }
}

/* Split catalogue, rows and register layouts (Industries, Frameworks):
   no left rail or its indent, and roomier rows. The full-width divide-y
   rules stay; row-gap is zeroed so each rule sits midway between rows. */
.vx-register { row-gap: 0; }
.vx-register > * { padding-left: 0; padding-block: 2rem; }
@media (min-width: 64rem) { .vx-register > * { padding-block: 2.5rem; } }
.vx-register > * > .absolute.left-0 { display: none; }

/* ---------------------------------------------------------------------------
   Assessment forms (vectra/assessment; template-parts/blocks/assessment.php,
   assets/js/assessment.js). Heading, lead and step list on the left; the
   form panel on the right. Option cells are flat keyline cells like the
   rest of the site; the selected one takes the brand blue. Without the
   script every step shows in turn and only the submit button appears.
   --------------------------------------------------------------------------- */
.vx-qf [hidden], .vx-qf-nav [hidden] { display: none !important; }
.vx-qf-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64rem) {
  .vx-qf-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 4.5rem; }
  .vx-qf-aside { position: sticky; top: 7rem; }
}
.vx-qf-nav { display: none; list-style: none; margin: 2.25rem 0 0; padding: 0; counter-reset: none; }
@media (min-width: 64rem) { .vx-qf-ready .vx-qf-nav { display: block; } }
.vx-qf-nav li {
  display: flex; align-items: center; gap: .875rem;
  padding: .5rem 0; font-size: .9375rem; line-height: 1.3;
  color: rgba(10, 20, 36, .5); transition: color .2s;
}
.vx-qf-nav-n {
  flex: none; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  border: 1px solid rgba(10, 20, 36, .2);
  font: 600 .75rem/1 var(--font-mono); font-variant-numeric: tabular-nums;
  transition: background-color .2s, border-color .2s, color .2s;
}
.vx-qf-nav li.is-done { color: rgba(10, 20, 36, .75); cursor: pointer; }
.vx-qf-nav li.is-done:hover { color: #174fd0; }
.vx-qf-nav li.is-done .vx-qf-nav-n { border-color: rgba(28, 102, 242, .5); color: #1c66f2; }
.vx-qf-nav li.is-current { color: #0a1424; font-weight: 600; }
.vx-qf-nav li.is-current .vx-qf-nav-n { background: #1c66f2; border-color: #1c66f2; color: #fff; }

/* Panel */
.vx-qf {
  position: relative; min-width: 0;
  padding: 1.5rem; border: 1px solid rgba(10, 20, 36, .12);
  background: rgba(255, 255, 255, .55); color: #0a1424;
}
@media (min-width: 64rem) { .vx-qf { padding: 2.75rem; } }
.vx-qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vx-qf-head { display: none; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.vx-qf.is-js .vx-qf-head { display: flex; }
.vx-qf-count { flex: none; font: 600 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(10, 20, 36, .55); }
.vx-qf-bar { position: relative; flex: 1; height: 3px; background: rgba(10, 20, 36, .08); overflow: hidden; }
.vx-qf-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; background: #1c66f2; transition: width .45s cubic-bezier(.2, .7, .2, 1); }

/* Steps */
.vx-qf-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.vx-qf:not(.is-js) .vx-qf-step + .vx-qf-step { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid rgba(10, 20, 36, .12); }
.vx-qf.is-js .vx-qf-step { display: none; }
.vx-qf.is-js .vx-qf-step.is-current { display: block; animation: vx-qf-in .35s ease both; }
@keyframes vx-qf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vx-qf.is-js .vx-qf-step.is-current { animation: none; } }
.vx-qf-step-title { display: block; width: 100%; padding: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #0a1424; }
.vx-qf-step-title:focus { outline: none; }
@media (min-width: 64rem) { .vx-qf-step-title { font-size: 1.75rem; } }
.vx-qf-step-intro { margin-top: .625rem; max-width: 40rem; font-size: .9375rem; line-height: 1.6; color: rgba(10, 20, 36, .65); }
.vx-qf-step-sub { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(10, 20, 36, .12); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: #0a1424; max-width: 40rem; }

/* Fields */
.vx-qf-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem 1.25rem; margin-top: 1.75rem; }
@media (min-width: 40rem) {
  .vx-qf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-qf-fields > * { grid-column: 1 / -1; }
  .vx-qf-fields > .vx-qf-half { grid-column: auto; }
}
.vx-qf-fields:has(> .vx-qf-scale) { gap: 0; }
.vx-qf-group { padding-top: 1.5rem; border-top: 1px solid rgba(10, 20, 36, .12); }
.vx-qf-group-title { font: 600 .75rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #174fd0; }
.vx-qf-group > .vx-qf-fields { margin-top: 1.125rem; }
.vx-qf-label { display: block; margin-bottom: .625rem; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: #0a1424; }
.vx-qf-optional { font-weight: 400; color: rgba(10, 20, 36, .5); }
.vx-qf-help { display: block; margin: -.25rem 0 .625rem; font-size: .8125rem; line-height: 1.5; color: rgba(10, 20, 36, .55); }
.vx-qf-entry .vx-qf-help { margin: .5rem 0 0; }
.vx-qf-control {
  display: block; width: 100%; padding: .75rem .875rem;
  border: 1px solid rgba(10, 20, 36, .2); border-radius: 0; background: #fff;
  font: inherit; font-size: .9375rem; color: #0a1424;
  transition: border-color .15s, box-shadow .15s;
}
textarea.vx-qf-control { resize: vertical; min-height: 5.5rem; }
.vx-qf-control:focus { outline: none; border-color: #1c66f2; box-shadow: 0 0 0 3px rgba(28, 102, 242, .15); }
.vx-qf-control::placeholder { color: rgba(10, 20, 36, .35); }

/* Option cells */
.vx-qf-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .625rem; }
.vx-qf-compact .vx-qf-opts { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.vx-qf-opt {
  position: relative; display: flex; align-items: flex-start; gap: .75rem;
  padding: .875rem 1rem; cursor: pointer;
  border: 1px solid rgba(10, 20, 36, .16); background: rgba(255, 255, 255, .65);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.vx-qf-compact .vx-qf-opt { padding: .75rem .875rem; align-items: center; }
.vx-qf-opt:hover { border-color: rgba(10, 20, 36, .38); }
.vx-qf-opt:has(.vx-qf-input:checked) { border-color: #1c66f2; background: rgba(28, 102, 242, .06); box-shadow: inset 0 0 0 1px #1c66f2; }
.vx-qf-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vx-qf-mark {
  position: relative; flex: none; width: 1.0625rem; height: 1.0625rem; margin-top: .125rem;
  border: 1.5px solid rgba(10, 20, 36, .35); border-radius: 9999px; background: #fff;
  transition: border-color .15s, background-color .15s;
}
.vx-qf-compact .vx-qf-mark { margin-top: 0; }
.vx-qf-input[type="checkbox"] + .vx-qf-mark { border-radius: 3px; }
.vx-qf-input:checked + .vx-qf-mark { border-color: #1c66f2; background: #1c66f2; }
.vx-qf-input[type="radio"]:checked + .vx-qf-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 9999px; background: #fff;
}
.vx-qf-input[type="checkbox"]:checked + .vx-qf-mark::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.vx-qf-input:focus-visible + .vx-qf-mark { outline: 2px solid #1c66f2; outline-offset: 3px; }
.vx-qf-opt-body { display: block; min-width: 0; }
.vx-qf-opt-title { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: #0a1424; }
.vx-qf-opt-text { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.5; color: rgba(10, 20, 36, .6); }

/* Posture scale questions */
.vx-qf-scale { padding: 1.375rem 0; border-top: 1px solid rgba(10, 20, 36, .1); }
.vx-qf-scale:first-child { border-top: 0; padding-top: 0; }
.vx-qf-scale .vx-qf-label { font-weight: 500; font-size: 1rem; max-width: 42rem; margin-bottom: .875rem; }
.vx-qf-scale .vx-qf-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 48rem) { .vx-qf-scale .vx-qf-opts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vx-qf-scale .vx-qf-opt { padding: .625rem .75rem; align-items: center; }
.vx-qf-scale .vx-qf-mark { margin-top: 0; }
.vx-qf-scale .vx-qf-opt-title { font-size: .875rem; font-weight: 500; }

/* Errors, consent, status */
.vx-qf-error { margin-top: .5rem; font-size: .8125rem; color: #b4410c; }
.is-invalid .vx-qf-control { border-color: #c2410c; }
.is-invalid .vx-qf-opt { border-color: rgba(194, 65, 12, .45); }
.vx-qf-consent { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.75rem; font-size: .8125rem; line-height: 1.5; color: rgba(10, 20, 36, .65); cursor: pointer; }
.vx-qf-consent input { flex: none; width: 1rem; height: 1rem; margin-top: .125rem; accent-color: #1c66f2; }
.vx-qf-consent a { color: #174fd0; text-decoration: underline; text-underline-offset: 3px; }
.vx-qf-status { margin-top: 1.25rem; font-size: .875rem; color: #b4410c; }

/* Buttons */
.vx-qf-foot { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(10, 20, 36, .1); }
.vx-qf-foot > [hidden] { display: none !important; }
.vx-qf-back {
  padding: .75rem 1.25rem; border: 1px solid rgba(10, 20, 36, .2); background: transparent;
  font: inherit; font-size: .875rem; font-weight: 500; color: #0a1424; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.vx-qf-back:hover { border-color: rgba(10, 20, 36, .4); background: rgba(10, 20, 36, .03); }
.vx-qf-next, .vx-qf-submit {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.6rem; border: 0; border-radius: .375rem;
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.vx-qf-next::after, .vx-qf-submit::after { content: "\2192"; }
.vx-qf:not(.is-js) .vx-qf-next, .vx-qf:not(.is-js) .vx-qf-back { display: none; }
.vx-qf-submit.is-busy { opacity: .7; cursor: progress; }
.vx-qf-link { margin-top: 1rem; padding: 0; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 500; color: #174fd0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Summary (pentest) */
.vx-qf-summary { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(10, 20, 36, .12); background: rgba(255, 255, 255, .6); }
.vx-qf-dl { display: grid; grid-template-columns: minmax(0, 1fr); margin: .75rem 0 0; font-size: .875rem; line-height: 1.5; }
.vx-qf-dl dt { padding-top: .625rem; color: rgba(10, 20, 36, .55); }
.vx-qf-dl dd { margin: 0; padding-bottom: .625rem; border-bottom: 1px solid rgba(10, 20, 36, .08); color: #0a1424; }
@media (min-width: 40rem) {
  .vx-qf-dl { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .vx-qf-dl dt, .vx-qf-dl dd { padding: .625rem 0; border-bottom: 1px solid rgba(10, 20, 36, .08); }
  .vx-qf-dl dt { padding-right: 1.25rem; }
}

/* Results */
.vx-qf-results { margin-top: 1.75rem; }
.vx-qf-res-h { margin: 2.25rem 0 .875rem; font: 600 .75rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #174fd0; }
.vx-qf-summary .vx-qf-res-h { margin-top: 0; }
.vx-qf-score { display: flex; align-items: center; gap: 1.5rem; }
.vx-qf-ring {
  --p: 0; position: relative; flex: none; display: grid; place-items: center;
  width: 7rem; height: 7rem; border-radius: 9999px;
  background: conic-gradient(#1c66f2 calc(var(--p) * 1%), rgba(10, 20, 36, .08) 0);
}
.vx-qf-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 9999px; background: #f8f7f4; }
.vx-qf-ring > span { position: relative; font-size: 1.625rem; font-weight: 600; letter-spacing: -.02em; color: #0a1424; }
.vx-qf-score-label { font: 600 .6875rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(10, 20, 36, .5); }
.vx-qf-score-band { margin-top: .25rem; font-size: 1.625rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #0a1424; }
.vx-qf-score-text { margin-top: .375rem; font-size: .9375rem; line-height: 1.55; color: rgba(10, 20, 36, .7); max-width: 34rem; }
.vx-qf-meters { display: grid; gap: .75rem; margin-top: 2rem; }
.vx-qf-meter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .375rem 1rem; }
.vx-qf-meter-name { font-size: .875rem; color: #0a1424; }
.vx-qf-meter { grid-column: 1 / -1; height: .5rem; background: rgba(10, 20, 36, .08); overflow: hidden; }
.vx-qf-meter > span { display: block; height: 100%; }
.vx-qf-meter > .is-low { background: #e0a526; }
.vx-qf-meter > .is-mid { background: #6fa0f6; }
.vx-qf-meter > .is-high { background: #1c66f2; }
.vx-qf-meter-pct { grid-column: 2; grid-row: 1; font-size: .8125rem; font-variant-numeric: tabular-nums; color: rgba(10, 20, 36, .6); }
@media (min-width: 48rem) {
  .vx-qf-meter-row { grid-template-columns: 13rem minmax(0, 1fr) 3rem; }
  .vx-qf-meter { grid-column: auto; }
  .vx-qf-meter-pct { grid-column: auto; grid-row: auto; text-align: right; }
}
.vx-qf-advice, .vx-qf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding: 0 1px 1px 0; }
.vx-qf-advice-cell, .vx-qf-card { margin: 0 -1px -1px 0; padding: 1.25rem; border: 1px solid rgba(10, 20, 36, .14); background: rgba(255, 255, 255, .55); }
.vx-qf-advice-title { font-size: .9375rem; font-weight: 600; color: #0a1424; }
.vx-qf-advice-text { margin-top: .375rem; font-size: .8125rem; line-height: 1.55; color: rgba(10, 20, 36, .65); }
.vx-qf-advice-link { display: inline-block; margin-top: .75rem; font-size: .875rem; font-weight: 600; color: #174fd0; }
.vx-qf-advice-link:hover { color: #0a1424; }
.vx-qf-card-k { font: 600 .6875rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(10, 20, 36, .5); }
.vx-qf-card-v { margin-top: .5rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #0a1424; }
.vx-qf-card-t { margin-top: .5rem; font-size: .8125rem; line-height: 1.55; color: rgba(10, 20, 36, .65); }
.vx-qf-notes { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.vx-qf-notes li { position: relative; padding-left: 1.125rem; font-size: .9375rem; line-height: 1.55; color: rgba(10, 20, 36, .8); }
.vx-qf-notes li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 5px; height: 5px; border-radius: 9999px; background: #1c66f2; }
.vx-qf-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1.25rem; }
.vx-qf-links .vx-qf-advice-link { margin-top: 0; }
.vx-qf-note { margin-top: 1rem; font-size: .8125rem; line-height: 1.5; color: rgba(10, 20, 36, .55); }
.vx-qf-done { padding: 1rem 0; }
.vx-qf-done:focus { outline: none; }
.vx-qf-done-title { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: #0a1424; margin-bottom: .5rem; }
.vx-qf-done p:not(.vx-qf-done-title) { font-size: 1rem; line-height: 1.6; color: rgba(10, 20, 36, .7); max-width: 36rem; }
.vx-qf-advice { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* Services menu, Compliance & Governance column: thirteen services listed as
   titles only, on a slightly tighter pitch than the described items, so the
   column stays near the height of its neighbours (which carry a one-line
   description per item) while each link keeps room to breathe. Phones keep
   the 44px tap targets set for .mobile-secondary-body .dd-item. */
@media (min-width: 64rem) {
  .dd-item.vx-dd-compact { padding-top: 10px; padding-bottom: 10px; }
  .dd-item.vx-dd-compact .dd-title { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .88); }
  .dd-item.vx-dd-compact:hover .dd-title { color: #fff; }
}

/* Timeline rows: the event's first line is centred on the year beside it.
   Baseline alignment left the small text looking low against the large
   numerals. The padding is half the difference between the two line boxes:
   year text-2xl / lg:text-3xl (2rem / 2.25rem lines), event 15px / lg 16px
   at leading-relaxed (1.625). */
.vx-tl-event { padding-top: calc((2rem - 15px * 1.625) / 2); }
@media (min-width: 64rem) {
  .vx-tl-event { padding-top: calc((2.25rem - 1rem * 1.625) / 2); }
}

/* ===========================================================================
   Closing contact section (final_cta block, template-parts/blocks/final-cta.php;
   behaviour in assets/js/final-cta.js). Adopted from contact concept A,
   October 2026. overflow: clip (not hidden) so the sticky copy column works;
   hidden stays as the fallback for browsers without clip.
   =========================================================================== */
.vx-fc { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: 6rem 0; border-top: 1px solid rgba(255, 255, 255, .1); color: #fff; }
@media (min-width: 64rem) { .vx-fc { padding: 9rem 0; } }
.vx-fc [hidden] { display: none !important; }
.vx-fc *, .vx-fc *::before, .vx-fc *::after { box-sizing: border-box; }

.vx-fc .vx-fc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vx-fc .vx-fc-mesh1 { position: absolute; left: -10rem; top: 0; width: 1000px; height: 800px; opacity: .45; }
.vx-fc .vx-fc-mesh2 { position: absolute; right: -5rem; bottom: 0; width: 800px; height: 600px; opacity: .35; }

.vx-fc .vx-fc-eyebrow { margin: 0; font: 600 .72rem/1.2 var(--font-mono, ui-sans-serif, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #8ec9ff; }


/* Two columns: copy and contact rows, then the form. */
.vx-fc .vx-fc-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.vx-fc .vx-fc-copy { min-width: 0; }
.vx-fc .vx-fc-formcol { min-width: 0; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 64rem) {
  .vx-fc .vx-fc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  /* The form runs longer, so the copy and contact rows stay in view beside it. */
  .vx-fc .vx-fc-copy { position: sticky; top: 7rem; padding-right: 3rem; }
  .vx-fc .vx-fc-formcol { margin-top: 0; padding-top: 0; padding-left: 4rem; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .1); }
}

.vx-fc .vx-fc-h2 { margin: 0; font-size: clamp(1.875rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.vx-fc .vx-fc-pitch { margin: 1.25rem 0 0; max-width: 28rem; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.vx-fc .vx-fc-channels { list-style: none; margin: 2.5rem 0 0; padding: 2rem 0 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: .5rem; }
.vx-fc .vx-fc-channel { display: flex; align-items: center; gap: .9rem; min-height: 3.5rem; padding: .5rem .75rem .5rem .5rem; margin-left: -.5rem; border-radius: 8px; color: rgba(255, 255, 255, .85); text-decoration: none; transition: background-color .2s, color .2s; }
.vx-fc .vx-fc-channel:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.vx-fc .vx-fc-channel:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 2px; }
.vx-fc .vx-fc-channel-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 6px; background: rgba(255, 255, 255, .05); color: #8ec9ff; }
.vx-fc .vx-fc-channel-icon svg { width: 1.1rem; height: 1.1rem; }
/* The incident line keeps the live block's gold alert tone. */
.vx-fc .vx-fc-channel-alert .vx-fc-channel-icon { background: rgba(245, 197, 24, .1); color: #f5c518; }
.vx-fc .vx-fc-channel-alert:hover .vx-fc-channel-icon { background: rgba(245, 197, 24, .15); }
.vx-fc .vx-fc-channel-alert .vx-fc-channel-k { color: #f5c518; }
.vx-fc .vx-fc-channel-body { min-width: 0; display: grid; gap: .15rem; }
.vx-fc .vx-fc-channel-k { font: 600 .66rem/1.2 var(--font-mono, ui-sans-serif, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.vx-fc .vx-fc-channel-v { font-size: 1rem; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.vx-fc .vx-fc-channel-t { font-size: .85rem; color: rgba(255, 255, 255, .55); }

/* Form */
.vx-fc .vx-fc-form { display: grid; gap: 1.75rem; margin: 0; }
.vx-fc .vx-fc-h3 { margin: .6rem 0 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.vx-fc .vx-fc-h3:focus { outline: none; }
.vx-fc .vx-fc-h3:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 4px; border-radius: 2px; }
.vx-fc .vx-fc-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.vx-fc .vx-fc-legend { padding: 0; margin: 0 0 .9rem; font: 600 .72rem/1.2 var(--font-mono, ui-sans-serif, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.vx-fc .vx-fc-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40rem) { .vx-fc .vx-fc-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.1rem; } .vx-fc .vx-fc-wide { grid-column: 1 / -1; } }
.vx-fc .vx-fc-field { min-width: 0; }
.vx-fc .vx-fc-lab { display: block; font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .85); }
.vx-fc .vx-fc-opt { font-weight: 400; color: rgba(255, 255, 255, .5); }
.vx-fc .vx-fc-input { display: block; width: 100%; min-height: 2.875rem; margin-top: .4rem; padding: .7rem .85rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.vx-fc .vx-fc-input::placeholder { color: rgba(255, 255, 255, .32); }
.vx-fc .vx-fc-input:hover { border-color: rgba(255, 255, 255, .24); }
.vx-fc .vx-fc-input:focus { outline: none; border-color: #58a9ff; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 3px rgba(88, 169, 255, .28); }
.vx-fc .vx-fc-input[aria-invalid="true"] { border-color: #ff8f85; }
.vx-fc .vx-fc-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 143, 133, .25); }
.vx-fc .vx-fc-area { resize: vertical; min-height: 7rem; }
.vx-fc .vx-fc-help { margin: .4rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .5); }
.vx-fc .vx-fc-err { display: flex; gap: .4rem; align-items: flex-start; margin: .45rem 0 0; font-size: .85rem; line-height: 1.4; color: #ffb3ab; }
.vx-fc .vx-fc-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; margin-top: .1rem; border-radius: 50%; background: #ff8f85; color: #0a1424; font-size: .7rem; font-weight: 700; line-height: 1; }

/* Interest chips: radios styled as pills. The radio stays focusable. */
.vx-fc .vx-fc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.vx-fc .vx-fc-chip { position: relative; display: inline-flex; max-width: 100%; }
.vx-fc .vx-fc-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vx-fc .vx-fc-chip label { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .03); font-size: .9rem; line-height: 1.25; color: rgba(255, 255, 255, .82); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.vx-fc .vx-fc-chip input:hover + label { border-color: rgba(142, 201, 255, .55); color: #fff; }
.vx-fc .vx-fc-chip input:checked + label { border-color: #58a9ff; background: rgba(28, 102, 242, .24); color: #fff; }
.vx-fc .vx-fc-chip input:focus-visible + label { outline: 2px solid #8ec9ff; outline-offset: 2px; }
.vx-fc .vx-fc-chip input[aria-invalid="true"] + label { border-color: rgba(255, 143, 133, .7); }
.vx-fc .vx-fc-tick { display: none; width: .9rem; height: .9rem; flex: none; color: #8ec9ff; }
.vx-fc .vx-fc-chip input:checked + label .vx-fc-tick { display: block; }
.vx-fc .vx-fc-hint:empty { display: none; }
.vx-fc .vx-fc-hint { margin: .75rem 0 0; padding: .6rem .8rem; border-left: 2px solid #f5c518; background: rgba(245, 197, 24, .06); font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.vx-fc .vx-fc-hint a { color: #f5c518; font-weight: 600; }

/* Consent */
.vx-fc .vx-fc-consent { display: flex; align-items: flex-start; gap: .75rem; }
.vx-fc .vx-fc-consent input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: #1c66f2; cursor: pointer; }
.vx-fc .vx-fc-consent input:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 3px; }
.vx-fc .vx-fc-consent input[aria-invalid="true"] { outline: 2px solid #ff8f85; outline-offset: 2px; }
.vx-fc .vx-fc-consent label { font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .65); cursor: pointer; padding: .1rem 0; }
.vx-fc .vx-fc-consent a { color: #8ec9ff; text-underline-offset: 3px; }
.vx-fc .vx-fc-consent a:hover { color: #fff; }

.vx-fc .vx-fc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer: the button, in the site's gold btn-primary (app.css) */
.vx-fc .vx-fc-foot { display: flex; flex-direction: column-reverse; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
@media (min-width: 40rem) { .vx-fc .vx-fc-foot { flex-direction: row; align-items: center; justify-content: space-between; } }
.vx-fc .vx-fc-submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; flex: none; min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: 6px; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.vx-fc .vx-fc-submit:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 3px; }
.vx-fc .vx-fc-submit[aria-disabled="true"] { cursor: progress; filter: saturate(.75); transform: none; }
.vx-fc .vx-fc-arrow { width: 1rem; height: 1rem; }
.vx-fc .vx-fc-spin { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(10, 22, 40, .3); border-top-color: #0a1628; border-radius: 50%; animation: vx-fc-spin .8s linear infinite; }
.vx-fc .vx-fc-submit[aria-disabled="true"] .vx-fc-spin { display: block; }
.vx-fc .vx-fc-submit[aria-disabled="true"] .vx-fc-arrow { display: none; }
@keyframes vx-fc-spin { to { transform: rotate(360deg); } }
@media (max-width: 39.98rem) { .vx-fc .vx-fc-submit { width: 100%; } }

/* Error summary and send failure */
.vx-fc .vx-fc-summary, .vx-fc .vx-fc-fail { padding: 1rem 1.1rem; border: 1px solid rgba(255, 143, 133, .5); border-left-width: 3px; border-radius: 6px; background: rgba(255, 143, 133, .07); font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.vx-fc .vx-fc-summary:focus, .vx-fc .vx-fc-fail:focus { outline: 2px solid #ff8f85; outline-offset: 2px; }
.vx-fc .vx-fc-summary-title { margin: 0; font-weight: 600; color: #fff; }
.vx-fc .vx-fc-summary-list { margin: .5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.vx-fc .vx-fc-summary a, .vx-fc .vx-fc-fail a { color: #ffb3ab; text-underline-offset: 3px; }
.vx-fc .vx-fc-summary a:hover, .vx-fc .vx-fc-fail a:hover { color: #fff; }
.vx-fc .vx-fc-fail p { margin: 0; }
.vx-fc .vx-fc-fail p + p { margin-top: .35rem; }

/* In-place success */
.vx-fc .vx-fc-done { padding: 2rem 0 .5rem; }
.vx-fc .vx-fc-done-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: 50%; background: rgba(28, 102, 242, .22); border: 1px solid rgba(88, 169, 255, .5); color: #8ec9ff; }
.vx-fc .vx-fc-done-icon svg { width: 1.4rem; height: 1.4rem; }
.vx-fc .vx-fc-done .vx-fc-h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.vx-fc .vx-fc-done-text { margin: 1rem 0 0; max-width: 34rem; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.vx-fc .vx-fc-done-text strong { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.vx-fc .vx-fc-done-small { font-size: .9rem; color: rgba(255, 255, 255, .6); }
.vx-fc .vx-fc-done-sum { display: grid; gap: .6rem; margin: 1.5rem 0 0; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .03); }
@media (min-width: 40rem) { .vx-fc .vx-fc-done-sum { grid-template-columns: 1fr 1fr; } }
.vx-fc .vx-fc-done-sum div { min-width: 0; }
.vx-fc .vx-fc-done-sum dt { font: 600 .66rem/1.2 var(--font-mono, ui-sans-serif, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.vx-fc .vx-fc-done-sum dd { margin: .3rem 0 0; font-size: .95rem; color: #fff; overflow-wrap: anywhere; }
.vx-fc .vx-fc-again { min-height: 2.75rem; margin-top: 1.75rem; padding: 0 1.1rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; background: transparent; color: #fff; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background-color .2s; }
.vx-fc .vx-fc-again:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .05); }
.vx-fc .vx-fc-again:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 3px; }

.vx-fc .vx-fc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


@media (prefers-reduced-motion: reduce) {
  .vx-fc *, .vx-fc *::before, .vx-fc *::after { transition: none !important; }
  .vx-fc .vx-fc-submit:hover { transform: none; }
  .vx-fc .vx-fc-spin { animation-duration: 2.4s; }
}

/* 404 page (404.php): a search field look-alike that opens the site search
   palette. The ⌘K hint only shows where there is a keyboard to use it. */
.vx-404-search { display: flex; align-items: center; gap: .9rem; width: 100%; max-width: 42rem; min-height: 3.5rem; padding: .75rem 1rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .7); font: inherit; font-size: 1rem; cursor: text; transition: border-color .2s, background-color .2s, color .2s; }
.vx-404-search:hover { border-color: rgba(142, 201, 255, .5); background: rgba(255, 255, 255, .06); color: #fff; }
.vx-404-search:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 2px; }
.vx-404-kbd { display: none; padding: .15rem .45rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px; font: 600 .72rem/1.4 var(--font-mono, ui-monospace, monospace); color: rgba(255, 255, 255, .55); }
@media (min-width: 64rem) { .vx-404-kbd { display: inline-block; } }

/* ---------------------------------------------------------------------------
   Enquiry form embedded in the contact page card (contact_form block):
   .vx-fc-embed drops the closing section's band (padding, rule, clipping), and
   .vx-fc-light maps the form from the ink ground to ink-on-parchment.
   --------------------------------------------------------------------------- */
.vx-fc.vx-fc-embed { padding: 0; border-top: 0; overflow: visible; isolation: auto; }
.vx-fc.vx-fc-embed .vx-fc-h3 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }
@media (min-width: 64rem) { .vx-fc.vx-fc-embed .vx-fc-h3 { font-size: 1.875rem; } }
.vx-fc .vx-fc-sub { margin: .5rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .6); }

.vx-fc.vx-fc-light { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-h3 { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-sub,
.vx-fc.vx-fc-light .vx-fc-help { color: rgba(10, 20, 36, .6); }
.vx-fc.vx-fc-light .vx-fc-eyebrow { color: #1d5fd1; }
.vx-fc.vx-fc-light .vx-fc-legend { color: rgba(10, 20, 36, .6); }
.vx-fc.vx-fc-light .vx-fc-lab { color: rgba(10, 20, 36, .85); }
.vx-fc.vx-fc-light .vx-fc-opt { color: rgba(10, 20, 36, .5); }
.vx-fc.vx-fc-light .vx-fc-input { background: #fff; border-color: rgba(10, 20, 36, .16); color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-input::placeholder { color: rgba(10, 20, 36, .4); }
.vx-fc.vx-fc-light .vx-fc-input:hover { border-color: rgba(10, 20, 36, .3); }
.vx-fc.vx-fc-light .vx-fc-input:focus { background: #fff; border-color: #3086ff; box-shadow: 0 0 0 3px rgba(48, 134, 255, .2); }
.vx-fc.vx-fc-light .vx-fc-input[aria-invalid="true"] { border-color: #d64545; }
.vx-fc.vx-fc-light .vx-fc-err { color: #b42318; }
.vx-fc.vx-fc-light .vx-fc-err::before { background: #d64545; color: #fff; }
.vx-fc.vx-fc-light .vx-fc-chip label { border-color: rgba(10, 20, 36, .16); background: #fff; color: rgba(10, 20, 36, .8); }
.vx-fc.vx-fc-light .vx-fc-chip input:hover + label { border-color: rgba(28, 102, 242, .5); color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-chip input:checked + label { border-color: #1c66f2; background: rgba(28, 102, 242, .1); color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-chip input:focus-visible + label { outline-color: #1c66f2; }
.vx-fc.vx-fc-light .vx-fc-chip input[aria-invalid="true"] + label { border-color: rgba(214, 69, 69, .7); }
.vx-fc.vx-fc-light .vx-fc-tick { color: #1c66f2; }
.vx-fc.vx-fc-light .vx-fc-hint { border-left-color: #d4a106; background: rgba(245, 197, 24, .14); color: rgba(10, 20, 36, .85); }
.vx-fc.vx-fc-light .vx-fc-hint a { color: #7a5a00; }
.vx-fc.vx-fc-light .vx-fc-consent label { color: rgba(10, 20, 36, .68); }
.vx-fc.vx-fc-light .vx-fc-consent a { color: #1d5fd1; }
.vx-fc.vx-fc-light .vx-fc-consent a:hover { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-consent input { border-color: rgba(10, 20, 36, .3); }
.vx-fc.vx-fc-light .vx-fc-foot { border-top-color: rgba(10, 20, 36, .1); }
.vx-fc.vx-fc-light .vx-fc-submit:focus-visible { outline-color: #1c66f2; }
.vx-fc.vx-fc-light .vx-fc-summary,
.vx-fc.vx-fc-light .vx-fc-fail { border-color: rgba(214, 69, 69, .45); background: rgba(214, 69, 69, .06); color: rgba(10, 20, 36, .88); }
.vx-fc.vx-fc-light .vx-fc-summary-title { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-summary a,
.vx-fc.vx-fc-light .vx-fc-fail a { color: #b42318; }
.vx-fc.vx-fc-light .vx-fc-summary a:hover,
.vx-fc.vx-fc-light .vx-fc-fail a:hover { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-done-icon { background: rgba(28, 102, 242, .1); border-color: rgba(28, 102, 242, .35); color: #1c66f2; }
.vx-fc.vx-fc-light .vx-fc-done .vx-fc-h3 { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-done-text { color: rgba(10, 20, 36, .72); }
.vx-fc.vx-fc-light .vx-fc-done-text strong { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-done-small { color: rgba(10, 20, 36, .6); }
.vx-fc.vx-fc-light .vx-fc-done-sum { border-color: rgba(10, 20, 36, .1); background: #fff; }
.vx-fc.vx-fc-light .vx-fc-done-sum dt { color: rgba(10, 20, 36, .5); }
.vx-fc.vx-fc-light .vx-fc-done-sum dd { color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-again { border-color: rgba(10, 20, 36, .2); color: #0a1424; }
.vx-fc.vx-fc-light .vx-fc-again:hover { border-color: rgba(10, 20, 36, .35); background: rgba(10, 20, 36, .04); }
.vx-fc.vx-fc-light .vx-fc-again:focus-visible { outline-color: #1c66f2; }

/* Contact channel cards (vectra_contact_channels in inc/render.php): each
   email / phone link is a full-height row led by a plain blue icon (no tile).
   On the parchment contact page the icon turns a deeper blue and the
   incident card keeps its gold edge. */
.vx-ch-link { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; margin-left: -.375rem; padding: .25rem .375rem; border-radius: 6px; font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .85); text-decoration: none; overflow-wrap: anywhere; }
.vx-ch-link:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.vx-ch-link:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 2px; }
.vx-ch-icon { flex: none; display: grid; place-items: center; }
.vx-ch-icon svg { width: 1.125rem; height: 1.125rem; color: #8ec9ff; }
.vx-contact-form .vx-ch-link { color: #0a1424; }
.vx-contact-form .vx-ch-link:hover { color: #1d5fd1; background: rgba(28, 102, 242, .06); }
.vx-contact-form .vx-ch-link:focus-visible { outline-color: #1c66f2; }
.vx-contact-form .vx-ch-icon svg { color: #1d5fd1; }
.vx-contact-form .rounded-md.border.vx-ch-alert { border-color: rgba(212, 161, 6, .55); background: linear-gradient(135deg, rgba(245, 197, 24, .18), #f8f7f4 65%); }
/* Contact form section: the photographs' dot-grid motif (the same 1.3px dots
   on a 14px grid as .vx-overview-media::before), in brand blue on the
   parchment, inset from the top-left corner and dissolving towards the
   middle, opposite the diamond watermark (::before) at bottom right. The content
   wrapper is lifted above both. */
.vx-contact-form > div { z-index: 1; }
.vx-contact-form::after {
  content: "";
  position: absolute;
  top: 3rem;
  left: 3rem;
  width: 22rem;
  height: 22rem;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(28, 102, 242, .5) 1.3px, transparent 1.9px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 0% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(circle at 0% 0%, #000 20%, transparent 72%);
}
@media (max-width: 63.98rem) {
  .vx-contact-form::after { width: 12rem; height: 12rem; top: 2rem; left: 2rem; }
}