/* ============================================================
   Novix IT — Brand layer
   Loads after style.css to apply the v1.16 brand identity:
   palette, headline face (Gilroy), and surface tweaks.

   Demo build only. Gilroy is used internally for the directors
   review; the production site swaps to Manrope (OFL) unless a
   commercial Gilroy webfont licence is procured.
   ============================================================ */

/* ---- Gilroy headline face --------------------------------- */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Brand palette (v1.16) -------------------------------- */
:root {
  /* Override the Aiero theme's font tokens.
     The theme declares these in style.css and references them with
     var(--font-primary) / var(--font-secondary) at high specificity,
     so re-pointing them here is the only reliable way to swap fonts
     site-wide. !important ensures we beat any later :root declaration
     that the theme or its plugins may also set on the root. */
  --font-primary: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif !important;
  --font-secondary: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif !important;

  /* === Core palette === */
  --novix-ink:        #02102D;
  --novix-light-blue: #0AD3FB;
  --novix-dark-blue:  #0F77F9;
  --novix-purple:     #831AE7;
  --novix-pink:       #DF0DE2;

  /* === Tints — same hue, lightness 75% (brand guide naming) === */
  --novix-light-blue-tint: #4DDFFC;
  --novix-blue-tint:       #83B5FC;
  --novix-purple-tint:     #BA8CF2;
  --novix-pink-tint:       #F687F8;

  /* === Shades — same hue, lightness 35% (brand guide naming) === */
  --novix-light-blue-shade: #0490AF;
  --novix-blue-shade:       #044BAE;
  --novix-purple-shade:     #5212A1;
  --novix-pink-shade:       #A30AA6;

  /* === Light surfaces — paper + paper-soft from brand guide === */
  --novix-paper:      #FFFFFF;
  --novix-paper-soft: #F6F7FB;
  --novix-rule:       rgba(2, 16, 45, 0.10);
  --novix-muted-text: rgba(2, 16, 45, 0.55);

  /* === Light elevation ladder (5 stops, lightest to deepest)
     Anchored on brand paper-soft. Outer steps computed with subtle
     Ink-blue tint for cohesion; not formally in the brand guide. */
  --novix-paper-elev-1: #FBFCFE;
  --novix-paper-elev-2: var(--novix-paper-soft);
  --novix-paper-elev-3: #EEF1F8;
  --novix-paper-elev-4: #E7EBF4;

  /* === Dark elevation ladder (4 stops, deepest to most elevated)
     Near-black #111111 is the deepest structural layer (Aiero original);
     Ink is the primary brand dark; ink-elev-1 is a computed step that
     follows the Ink hue family; ink-tint is the most elevated dark. */
  --novix-near-black: #111111;
  --novix-ink-elev-1: #0E1B3F;
  --novix-ink-tint:   #2C384F;

  /* === Text-on-surface tokens === */
  --novix-text-on-dark:   var(--novix-paper);
  --novix-text-on-light:  var(--novix-ink);
  --novix-muted-on-dark:  rgba(255, 255, 255, 0.72);
  --novix-muted-on-light: var(--novix-muted-text);

  /* === Legacy aliases (kept for any future references) === */
  --novix-bg-dark:       var(--novix-ink);
  --novix-bg-light:      var(--novix-paper);
  --novix-ink-t1:        var(--novix-ink-tint);
  --novix-light-blue-t1: var(--novix-light-blue-tint);
  --novix-dark-blue-t1:  var(--novix-blue-tint);
  --novix-purple-t1:     var(--novix-purple-tint);
  --novix-pink-t1:       var(--novix-pink-tint);

  /* === Brand "Wave" gradient (90deg per brand guide) === */
  --novix-gradient: linear-gradient(90deg,
    var(--novix-light-blue) 0%,
    var(--novix-dark-blue)  35%,
    var(--novix-purple)     70%,
    var(--novix-pink)       100%);

  /* === Hero / page-banner photo overlay ===
     Standard dark wash laid over a banner hero photo so the title reads
     cleanly. Used overlay-first in the background-image stack:
     background-image: var(--novix-hero-overlay-1), url(photo). 40% black,
     matching the About banner. Keep all banners referencing this so the
     overlay stays consistent; change it here to retune every banner. */
  --novix-hero-overlay-1: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

/* ---- Aiero theme variable overrides -----------------------
   Repoint the Aiero :root tokens at Novix tokens. Loaded after
   style.css so the Aiero defaults are overridden cleanly. Any
   CSS rule using var(--color-primary) etc. now resolves to the
   Novix value. See context/AIERO_TOKEN_MAP.md for the full map.
   ----------------------------------------------------------- */
:root {
  --color-primary:        var(--novix-light-blue);
  --color-secondary:      var(--novix-pink-tint);
  --color-secondary-alt:  var(--novix-pink-tint);

  --color-content-white:  var(--novix-paper);
  --color-content-black:  var(--novix-ink);
  --color-heading:        var(--novix-ink);

  --color-surface-white:    var(--novix-paper);
  --color-surface-dark:     var(--novix-near-black);
  --color-surface-dark-2:   var(--novix-ink-tint);
  --color-surface-light:    var(--novix-paper-elev-3);
  --color-surface-light-1:  var(--novix-paper-elev-4);
  --color-surface-light-3:  var(--novix-paper-soft);

  --color-border: var(--novix-rule);

  --gradient-1: linear-gradient(159deg,
    var(--novix-light-blue-tint) 2.13%,
    var(--novix-pink-tint)       95.42%);
  --gradient-3: linear-gradient(113deg,
    var(--novix-light-blue) 2.7%,
    var(--novix-dark-blue)  98.55%);
  --gradient-btn-1: linear-gradient(102deg,
    var(--novix-purple)    0%,
    var(--novix-dark-blue) 100%);
}

/* ---- Typography overrides --------------------------------- */

/* Body face — Inter (brand guide current placeholder body face).
   Manrope and system fonts as fallbacks. */
body,
.ibt-btn, .ibt-btn span,
.menu-item, .menu-item2,
.accordion-button, .accordion-body,
.price-item, .pricing-list,
.test-block2,
input, textarea, button, select {
  font-family: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Headline face — Gilroy. Applies to all H1-H6 and titles. */
h1, h2, h3, h4, h5, h6,
.title, .sub-title, .style-text,
.testi-title, .price {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6, .title {
  letter-spacing: normal;
}

/* Display headings — use Heavy for impact. Letter-spacing kept at
   normal: with Gilroy on a dark surface, negative tracking causes
   adjacent glyphs to optically bloom into each other. */
.hero-style6 .title,
.sec-title .title,
.testi-title .title,
.footer-content .title,
.footer-top .title {
  font-weight: 900;
  letter-spacing: normal;
}

/* Sub-titles — Light, uppercase, letter-spaced (per brand guide) */
.sec-title .sub-title {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
}

/* ---- Brand surface tweaks --------------------------------- */
.novix-trust-strip {
  background: var(--novix-ink);
  color: var(--novix-text-on-dark);
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.novix-trust-strip .trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 56px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.novix-trust-strip .trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--novix-muted-on-dark);
}
.novix-trust-strip .trust-row i {
  color: var(--novix-light-blue);
  font-size: 16px;
}

.novix-gradient-text {
  background: var(--novix-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.novix-pill {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novix-muted-on-dark);
}

/* Commitment cards — used on home + service pages */
.novix-commitments {
  background: var(--novix-ink);
  color: var(--novix-text-on-dark);
  padding: 80px 0;
}
.novix-commitments .commit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.novix-commitments .commit-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px;
}
.novix-commitments .commit-card h4 {
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--novix-text-on-dark);
}
.novix-commitments .commit-card p {
  color: var(--novix-muted-on-dark);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.novix-commitments .commit-card .stamp {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--novix-light-blue);
  margin-bottom: 12px;
}

/* Gradient accent stroke for select section titles */
.novix-accent-rule {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--novix-gradient);
  margin-bottom: 20px;
}

/* Logo size override — brand PNGs are larger than the original SVGs */
.theme-logo,
.footer-logo img,
.side-menu .logo img {
  height: auto;
  max-height: 36px;
  width: auto;
}
.footer-logo img {
  max-height: 56px;
}

/* Gradient button — uses --gradient-btn-1 (Purple → Dark Blue, 2-stop)
   as the primary visible background. Pairs with the .ibt-btn base
   class for layout/structure. */
.ibt-btn.ibt-btn-gradient {
  background: var(--gradient-btn-1);
  color: var(--novix-paper);
  position: relative;
  overflow: hidden;
}
.ibt-btn.ibt-btn-gradient:hover {
  filter: brightness(1.08);
}

/* Counter on .fun-fact-content.black — Aiero fills it with --color-heading
   (Ink), invisible against the Ink-coloured .black background. Fill with
   paper-soft so the "500+" reads cleanly on the dark surface. */
.fun-fact-content.black .counter-box {
  color: var(--novix-paper-soft);
  -webkit-text-fill-color: var(--novix-paper-soft);
}

/* Dark mode — flip the .black highlight box: light background with
   dark Ink text for the 500+ counter. Specificity beats the Aiero
   .active-body rules at style.css:6830 and 36144. */
.active-body .fun-fact-content.black {
  background-color: var(--novix-paper-soft);
}
.active-body .fun-fact-content.black .title,
.active-body .fun-fact-content.black p {
  color: var(--novix-ink);
}
.active-body .fun-fact-content.black .counter-box,
.active-body .fun-fact-content.black .counter-box span {
  color: var(--novix-ink);
  -webkit-text-fill-color: var(--novix-ink);
}

/* Light mode — give the non-.black counters (99%, 24/7) an Ink fill
   so the digits read against the light page; without this they fall
   back to Aiero's white fill which blends into a paper or paper-soft
   background. Gradient outline (text-stroke 2px) is preserved. */
.fun-fact-content:not(.black) .counter-box,
.fun-fact-content:not(.black) .counter-box span {
  color: var(--novix-ink);
  -webkit-text-fill-color: var(--novix-ink);
}

/* Dark mode — flip the non-.black counter fill to paper-soft so the
   digits read against the dark page. Same gradient outline. */
.active-body .fun-fact-content:not(.black) .counter-box,
.active-body .fun-fact-content:not(.black) .counter-box span {
  color: var(--novix-paper-soft);
  -webkit-text-fill-color: var(--novix-paper-soft);
}

/* "Novix IT" brand-name emphasis in testimonial heading — simple
   2-stop Dark Blue -> Purple gradient. */
.testi-title .title span {
  background-image: linear-gradient(90deg,
    var(--novix-dark-blue) 0%,
    var(--novix-purple)    100%);
}

/* Match the vertical gap between stacked testimonial cards to the
   Bootstrap row gutter (24px). Aiero ships .test-block2 at
   margin-bottom: 20px which doesn't quite line up. */
.testimonial-sec2 .test-block2 {
  margin-bottom: 24px;
}

/* The shadow overlay (.testimonial-sec2::before) is a 751px-tall PNG
   gradient that fades from transparent (top) to opaque (bottom).
   Shrinking the overlay clips the gradient, so leave it intact and
   instead push the cards up via padding-bottom. The bottom row now
   sits above the opaque zone of the fade, peeking through. */
.testimonial-sec2 {
  padding-bottom: 110px;
}

/* Aiero's .vs-header6 is position: absolute; top: 0 with no
   background colour on desktop -- a transparent overlay. The
   .page-banner11 sits behind it in flow, so the section's rounded
   top corners and decorative ::before bleed through the transparent
   header areas (visible at top-left where the contact pill doesn't
   cover the page-banner background). Two fixes:

   1. Hide .page-banner11::before. It's a decorative bg-layer2.png
      blob positioned at top: -29% of the section, extending well
      into the header zone.
   2. Push .page-banner11 below the header zone (~140px margin-top)
      so the rounded top corners don't overlap with the absolutely-
      positioned header. */
/* Aiero ships decorative pseudo-elements behind .team-detail-sec
   and .contact-sec2 (purple glow blob, world-map outline). Two
   issues hide them on most viewports:
   1. They're @media (max-width: 1440px) display: none. Show them
      everywhere; CSS background-image at right: 0 just clips at the
      viewport edge on narrower screens, no harm.
   2. The decorations are z-index: -1 absolute on a section with
      position: relative but no z-index, so they escape the section's
      stacking context and render behind unrelated elements.
      isolation: isolate creates a stacking context per section so
      the decorations sit cleanly behind the section's own content. */
.team-detail-sec,
.contact-sec2 {
  isolation: isolate;
}
@media (max-width: 1440px) {
  .contact-sec2::before {
    display: block;
  }
}

/* Team page side accent (team-layer.png), per Ricci: painted ONCE
   (Aiero's default tiled it every 1332px so it appeared to stop
   mid-page), anchored to the viewport so it travels with the scroll
   (background-attachment: fixed, right edge, vertically centred), and
   visible from the hero all the way to the footer. The original
   .team-detail-sec::after strip only covered the profile section, so
   the accent vanished at "what they've built and led"; it now lives on
   .team-page-body, a wrapper in team-page.php around the profile,
   selected-work, testimonial and leadership sections. NB a CSS
   transform on the painting element would force the fixed background
   back to scroll behaviour, so the wrapper must stay transform-free.
   Browsers without fixed-attachment support (older iOS) degrade to the
   image pinned at the top of the wrapper. */
.team-detail-sec::after {
  display: none; /* superseded by .team-page-body::after */
}
.team-page-body {
  position: relative;
  isolation: isolate;
}
.team-page-body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 485px;
  height: 100%;
  background-image: url(../images/layers/team-layer.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right center;
  z-index: -1;
}

/* Light-mode header backdrop. Aiero's .vs-header6 is position: absolute;
   top: 0 with a transparent desktop background -- the floating white nav
   pill relies on whatever sits behind it for contrast. On the homepage
   that's .hero-style6 (paper-elev-4); on inner pages the banners are pushed
   140px down (below), so nothing fills the header zone and it fell back to
   the white page -- white pill on white, so the menu looked like it
   vanished. Dark mode already gives the header its own backdrop
   (.active-body .vs-header6 { background: --novix-ink-elev-1 }); this is the
   light-mode counterpart. Painting just the header strip (not <body>) keeps
   the rest of the page white, matching index.php; on the homepage the tint
   sits flush against the identical hero colour, so it stays seamless.
   Desktop only -- below 1201px Aiero paints the header solid white and that
   rule must win. */
@media (min-width: 1202px) {
  .vs-header6 {
    background-color: var(--novix-paper-elev-4);
  }
}

/* Dark-mode menu fill. In light mode the .header-menu-area pill is white;
   Aiero leaves it transparent in dark mode (so it shows the --novix-ink-elev-1
   header backdrop behind it). Novix fills the pill itself with near-black --
   the dark counterpart of the white pill. The backdrop behind it stays
   Aiero's --novix-ink-elev-1. Applies at all widths. */
.active-body .vs-header6 .header-menu-area {
  background-color: var(--novix-near-black);
}
/* The sticky header (slides down on scroll, toggled with .is-sticky). Unlike
   the main header it's a single full-width bar -- the .sticky-active container
   IS the fill (Aiero paints it --novix-ink-elev-1; the inner .header-menu-area
   stays transparent). Recolour the container to near-black to match. Both the
   base and .is-sticky selectors, so it's near-black the whole slide-in. */
.active-body .sticky-active,
.active-body .sticky-active.is-sticky {
  background-color: var(--novix-near-black);
}

.page-banner2,
.page-banner4,
.page-banner9,
.page-banner11 {
  margin-top: 140px;
}
/* Page-banner hero images. Each banner carries its own image under the
   shared --novix-hero-overlay-1 wash, so the overlay stays consistent while
   the photos differ per page. Swap any url() for a real photo later.
   (page1-2.png / page1-4.png are Aiero's stock dimension placeholders.) */
.page-banner2,
.page-banner4,
.page-banner9,
.page-banner11 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--novix-ink);
}
.page-banner2 {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-2.png);
}
.page-banner4 {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-4.png);
}
/* Office.eu rides .page-banner4 (same banner mechanics as microsoft-365)
   and carries this extra class only to swap the photo. It must sit HERE,
   after the .page-banner4 image rule it overrides but before the desktop
   zone block, and stay SINGLE-CLASS: the zone's background: shorthand at
   >=1202px is same-specificity-later, so it resets this image and the
   area behind the inset card stays a toggle-controlled colour. (First
   ship had this rule at the end of the file, which painted the photo
   over the zone colour in both modes.) page1-3.png is Aiero's stock
   dimension placeholder. */
.page-banner-office {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-3.png);
}
/* Microsoft Office vs Office.eu rides .page-banner4 the same way; this
   class only swaps the photo. Same placement and single-class rules as
   .page-banner-office above. page1-5.png is Aiero's stock dimension
   placeholder. */
.page-banner-versus {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-5.png);
}
/* Plans / tier banners ride .page-banner4 the same way; each class only
   swaps the photo. Same placement and single-class rules as
   .page-banner-office above. page1-8/1/10 are unused Aiero stock
   dimension placeholders; scale reuses the base page1-4. */
.page-banner-plans {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-8.png);
}
.page-banner-launch {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-1.png);
}
.page-banner-build {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-10.png);
}
.page-banner-scale {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-4.png);
}
.page-banner9 {
  background-image: var(--novix-hero-overlay-1), url(../team-photos/contact-us-team.jpg);
}
.page-banner11 {
  background-image: var(--novix-hero-overlay-1), url(../heros/about-us-hero.jpg);
}
/* Privacy policy rides .page-banner11 (same banner mechanics as About)
   and carries this extra class only to swap the photo. Same placement
   rules as .page-banner-office above: single-class, after the base
   image rules, before the desktop zone block. page1-11.png is Aiero's
   stock dimension placeholder. */
.page-banner-privacy {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-11.png);
}
/* Downtime calculator rides .page-banner4 the same way; this class only
   swaps the photo. Same placement and single-class rules as
   .page-banner-office above. page1-6.png is Aiero's stock dimension
   placeholder. */
.page-banner-downtime {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-6.png);
}
/* Have You Been Hacked? rides .page-banner4 the same way; this class only
   swaps the photo. Same placement and single-class rules as
   .page-banner-office above. page1-7.png is Aiero's stock dimension
   placeholder. */
.page-banner-hacked {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-7.png);
}
/* Location pages (Edinburgh / Glasgow / London / Manchester) ride
   .page-banner4 the same way; each class only swaps the photo. Same
   placement and single-class rules as .page-banner-office above. All four
   currently reuse Aiero stock dimension placeholders; swap each url() for a
   real city photo when supplied. */
.page-banner-edinburgh {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-2.png);
}
.page-banner-glasgow {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-3.png);
}
.page-banner-london {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-5.png);
}
.page-banner-manchester {
  background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-6.png);
}
/* Hide Aiero's decorative ::before blob on every page-banner variant
   we use — it bleeds up through the absolutely-positioned site
   header and Euan does not want any overlay on the hero. */
.page-banner2::before,
.page-banner4::before,
.page-banner9::before,
.page-banner11::before {
  display: none;
}

/* ----------------------------------------------------------------
   Desktop: rebuild the navy banners (contact = .page-banner9, about =
   .page-banner11, team-single = .page-banner2, service single =
   .page-banner4) exactly the way the homepage
   hero (.hero-style6) is built, instead of the margin-inset card Aiero ships.

   The SECTION becomes the full-width grey zone -- its own background,
   flush to the top so it tucks under the transparent header, rounded only
   at the bottom -- and the navy/photo banner becomes an inset card inside
   it (.page-banner-inner), exactly like the hero photo sits inside
   .hero-style6. Padding does all the framing: top clears the menu, the
   sides inset the card, the bottom closes the zone. Because the grey is the
   section's own background it is always 100% wide and ends cleanly at the
   section bottom -- no pseudo-element, no overhang.

   Below 1202px the banners keep Aiero's full-bleed card (the section keeps
   its navy/photo background and padding; .page-banner-inner is an inert
   passthrough whose absolute children still anchor to the section). */
@media (min-width: 1202px) {
  .page-banner2,
  .page-banner4,
  .page-banner9,
  .page-banner11 {
    margin: 0;
    padding: 183px 20px 32px;  /* top clears the menu; 20px frame; 32px below */
    background: var(--novix-paper-elev-4);
    border-radius: 0 0 25px 25px;
  }
  .page-banner2 > .page-banner-inner,
  .page-banner4 > .page-banner-inner,
  .page-banner9 > .page-banner-inner,
  .page-banner11 > .page-banner-inner {
    position: relative;        /* re-anchor the shapes/staff-text/breadcrumbs */
    padding: 217px 0 235px;    /* match Aiero's .page-banner9 hero height */
    border-radius: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--novix-ink);
  }
  .page-banner2 > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-2.png);
  }
  .page-banner4 > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-4.png);
  }
  .page-banner9 > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../team-photos/contact-us-team.jpg);
  }
  .page-banner11 > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../heros/about-us-hero.jpg);
  }
  /* Office.eu inset card: page-specific photo over the .page-banner4 base. */
  .page-banner-office > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-3.png);
  }
  /* Microsoft Office vs Office.eu inset card, same pattern. */
  .page-banner-versus > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-5.png);
  }
  /* Privacy policy inset card: page-specific photo over the .page-banner11 base. */
  .page-banner-privacy > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-11.png);
  }
  /* Downtime calculator inset card: page-specific photo over the .page-banner4 base. */
  .page-banner-downtime > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-6.png);
  }
  /* Have You Been Hacked? inset card: page-specific photo over the .page-banner4 base. */
  .page-banner-hacked > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-7.png);
  }
  /* Location inset cards: page-specific photo over the .page-banner4 base. */
  .page-banner-edinburgh > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-2.png);
  }
  .page-banner-glasgow > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-3.png);
  }
  .page-banner-london > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-5.png);
  }
  .page-banner-manchester > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-6.png);
  }
  /* Plans / tier inset cards: page-specific photo over the .page-banner4 base. */
  .page-banner-plans > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-8.png);
  }
  .page-banner-launch > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-1.png);
  }
  .page-banner-build > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-10.png);
  }
  .page-banner-scale > .page-banner-inner {
    background-image: var(--novix-hero-overlay-1), url(../images/bg/page1-4.png);
  }
  /* Dark mode: the hero zone is the deep-ink hero colour (matching the
     homepage hero in dark mode), not the light-mode grey. */
  .active-body .page-banner2,
  .active-body .page-banner4,
  .active-body .page-banner9,
  .active-body .page-banner11 {
    background: var(--novix-ink-elev-1);
  }
  /* Corner notches (.shape = top-left, .shape3 = bottom-right): fill them
     with the hero-zone colour so the notch blends into the zone behind the
     card instead of showing Aiero's stock PNG. Same recolour-via-mask trick
     dark mode already uses globally -- grey in light mode, the deep-ink zone
     colour in dark mode. */
  .page-banner2 .shape::before,
  .page-banner4 .shape::before,
  .page-banner9 .shape::before,
  .page-banner11 .shape::before {
    background-image: none;
    background-color: var(--novix-paper-elev-4);
    -webkit-mask: url(../images/layers/shape1-4-dark.png) no-repeat 0 0 / 100% 100%;
            mask: url(../images/layers/shape1-4-dark.png) no-repeat 0 0 / 100% 100%;
  }
  .page-banner2 .shape3::before,
  .page-banner4 .shape3::before,
  .page-banner9 .shape3::before,
  .page-banner11 .shape3::before {
    background-image: none;
    background-color: var(--novix-paper-elev-4);
    -webkit-mask: url(../images/layers/shape1-4-dark2.png) no-repeat 0 0 / 100% 100%;
            mask: url(../images/layers/shape1-4-dark2.png) no-repeat 0 0 / 100% 100%;
  }
  .active-body .page-banner2 .shape::before,
  .active-body .page-banner4 .shape::before,
  .active-body .page-banner9 .shape::before,
  .active-body .page-banner11 .shape::before,
  .active-body .page-banner2 .shape3::before,
  .active-body .page-banner4 .shape3::before,
  .active-body .page-banner9 .shape3::before,
  .active-body .page-banner11 .shape3::before {
    background-color: var(--novix-ink-elev-1);
  }
}

/* Page-banner corner notches (.shape / .shape3). Aiero swaps these to
   shape1-4-dark.png / shape1-4-dark2.png in dark mode, but those PNGs are
   coloured for Aiero's original near-black theme. Against the Novix dark
   body (--color-surface-dark-2, the same colour .active-body paints the
   page) they read as off-colour panels floating in front of the banner and
   header. Drop the PNG as a fill, use it as a mask instead, and re-fill the
   exact notch silhouette with the dark body colour so it blends into the
   page background like the light-mode notch does. */
.active-body .shape::before {
  background-image: none;
  background-color: var(--color-surface-dark-2);
  -webkit-mask: url(../images/layers/shape1-4-dark.png) no-repeat 0 0 / 100% 100%;
          mask: url(../images/layers/shape1-4-dark.png) no-repeat 0 0 / 100% 100%;
}
.active-body .shape3::before {
  background-image: none;
  background-color: var(--color-surface-dark-2);
  -webkit-mask: url(../images/layers/shape1-4-dark2.png) no-repeat 0 0 / 100% 100%;
          mask: url(../images/layers/shape1-4-dark2.png) no-repeat 0 0 / 100% 100%;
}
/* Breadcrumb concave-corner fillets (.breadcrumbs::before / ::after). In dark
   mode Aiero's corner3-dark.png reads as a grey/off-colour square against the
   Novix navy breadcrumb bar. Recolour it to the bar colour via mask (same
   image + the existing rotate, so the geometry is unchanged) so the fillet
   corners match the colour behind the breadcrumbs. */
.active-body .breadcrumbs::before,
.active-body .breadcrumbs::after {
  background-image: none;
  background-color: var(--color-surface-dark-2);
  -webkit-mask: url(../images/layers/corner3-dark.png) no-repeat 0 0 / 100% 100%;
          mask: url(../images/layers/corner3-dark.png) no-repeat 0 0 / 100% 100%;
}

/* Widen the navigation sub-menu so longer items like "Operations
   Director" sit on a single line. Aiero defaults to 286px, which
   wrapped at ~19 characters; 360px gives ~25 characters of comfortable
   text room while preserving the fixed-width pill look. */
.main-menu > ul li .sub-menu {
  width: 360px;
}

/* About-section "Novix IT" wordmark: ~32% off the original Aiero
   400px (the previous 25% off, then another 10% off that). Both
   stroke shorthand and width matched at 3px so the gradient outline
   reads solidly at the smaller size. Gradient background-clip:text
   inherits untouched. */
.about-content9 .title {
  font-size: 270px;
  line-height: 203px;
  -webkit-text-stroke: 4px rgba(2, 1, 1, 0);
  -webkit-text-stroke-width: 4px;
}
@media (max-width: 1440px) {
  .about-content9 .title {
    font-size: 189px;
    line-height: 167px;
  }
}
@media (max-width: 1366px) {
  .about-content9 .title {
    font-size: 179px;
  }
}
@media (max-width: 1201px) {
  .about-content9 .title {
    font-size: 150px;
    line-height: 153px;
  }
}
@media (max-width: 1025px) {
  .about-content9 .title {
    font-size: 135px;
    line-height: 122px;
  }
}
@media (max-width: 577px) {
  .about-content9 .title {
    font-size: 90px;
    line-height: 75px;
  }
}
@media (max-width: 390px) {
  .about-content9 .title {
    font-size: 79px;
  }
}

/* Marquee text size reduction. Aiero ships .marquee-sec2 .marquee-inner
   span at 60px which felt overpowering for the brand voice. Drop to
   40px so the brand purpose statement reads clearly without shouting. */
.marquee-sec2 .marquee-inner span {
  font-size: 40px;
}
@media (max-width: 769px) {
  .marquee-sec2 .marquee-inner span {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (max-width: 577px) {
  .marquee-sec2 .marquee-inner span {
    font-size: 22px;
    line-height: 30px;
  }
}

/* About page marquee (.marquee-sec) shrunk 50%. Aiero defaults are
   120 / 80 / 50 across breakpoints; shrink to 60 / 40 / 25. */
.marquee-sec .marquee span {
  font-size: 60px;
  line-height: 65px;
}
@media (max-width: 769px) {
  .marquee-sec .marquee span {
    font-size: 40px;
    line-height: 28px;
  }
}
@media (max-width: 577px) {
  .marquee-sec .marquee span {
    font-size: 25px;
  }
}

/* Footer "Edinburgh & London" wordmark in .about-widget — Aiero ships
   it as outline-only (color: transparent + 1px purple-tint stroke).
   Fill the glyphs white so the text reads against the Ink footer
   background while keeping the existing stroke as the outline.
   Selector list covers both default and Aiero's .active-body dark-mode
   override (which has !important locking color to transparent at
   style.css:6459). */
.about-widget .title,
.active-body .about-widget .title {
  color: var(--novix-paper) !important;
}

/* Equal-height pricing cards — Bootstrap row stretches columns by
   default, but the .price-card2 inside doesn't fill its column.
   Make the inner col flex-display so the card can fill height; set
   the card to flex-column so the CTA can pin to the bottom via
   margin-top: auto. Result: all three cards line up at the bottom
   regardless of feature-list length. */
.pricing-sec3 .col-xl-8 > .row > [class*="col-"] {
  display: flex;
}
.pricing-sec3 .price-card2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.pricing-sec3 .price-item-price2 {
  margin-top: auto;
}

/* Pricing card price sizing — Aiero defaults render the price at
   60px and the /per-period unit at 20px (same as body copy, so the
   unit doesn't read as supporting info). Drop both one step down
   so the price still anchors visually but the unit reads as a
   secondary label. */
.pricing-sec3 .price-item-price2 .price {
  font-size: 44px;
  line-height: 1.1;
}
.pricing-sec3 .price-item-price2 .price span {
  font-size: 14px;
  line-height: 1.2;
}

/* Card CTA buttons: Aiero left-aligns them and lets the arrow push to
   the far edge, so they read as misaligned and clip the card padding.
   Make them full-width with centred content so all three line up. */
.pricing-sec3 .price-item-price2 .ibt-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 10px;
}

/* Pricing card text sizing — Aiero ships line-height: 40px on 16px
   feature items, so wrapped lines look detached from each other and
   each continuation line reads like a new item. Tighten line-height
   to 1.5 across feature lists and the tagline so wrapped lines
   read as continuations. */
.pricing-sec3 .price-heade2 span {
  line-height: 1.4;
}
.pricing-sec3 .price-item2 li {
  line-height: 1.5;
  margin-bottom: 6px;
}

/* "All plans include" callout in the description column. */
.pricing-content .pricing-include-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--novix-muted-text);
  margin: 24px 0 10px;
}
.pricing-content .pricing-include {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.pricing-content .pricing-include li {
  font-size: 15px;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}
.pricing-content .pricing-include li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--novix-light-blue);
}
.active-body .pricing-content .pricing-include li {
  color: var(--novix-paper-soft);
}

/* "Launch plus:" / "Build plus:" / "Base services" label inside each
   pricing card. Sits above the feature list, below the tagline. */
.price-card2 .price-card-plus {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--novix-muted-text);
  margin: 0 0 12px;
}
.active-body .price-card2 .price-card-plus {
  color: rgba(255, 255, 255, 0.65);
}

/* "what we do" image — original choose2.png shipped with rounded
   corners baked into the PNG itself; replacement JPG is a plain
   rectangle. Apply CSS border-radius + overflow hidden so the team
   photo gets the same rounded look. Container has the original
   721x1124 portrait aspect so the landscape photo is cropped to fit
   via object-fit: cover. Brandmark overlay at 60% opacity. */
.choose-img5 {
  display: block;
  width: 100%;
  aspect-ratio: 721 / 1124;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}
.choose-img5 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.choose-img5 .logo4 {
  opacity: 0.6 !important;
}

/* "what we do" wordmark — override font to Gilroy (not Heavy; keep
   Aiero's existing 700 weight) and fill colour to white. Gradient
   outline effect (text-stroke + background-clip: text) is left
   untouched. Selector list covers the .active-body dark-mode
   override in style.css:7385. */
.choose-us-sec5 .style-text,
.active-body .choose-us-sec5 .style-text {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  -webkit-text-fill-color: var(--novix-paper);
}

/* Direct contact form embedded in team-single page sits below the
   contact card. Paper-soft surface so the form reads as its own
   panel without darkening the column too much. 48px = Aiero's
   default 28px plus the 20px Euan asked for. */
.team-direct-form {
  margin-top: 32px;
  background: var(--novix-paper-soft);
  padding: 48px;
  border-radius: 16px;
}
.team-direct-form .custom-form > h2 {
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 1.2;
}
.active-body .team-direct-form {
  background: var(--novix-ink-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Dark mode legibility inside the direct form. Aiero's dark-mode rules
   assume .contact-form keeps its stock WHITE card (the footer form
   does), so they force the form heading to near-black (style.css:6809)
   and the button text to #333 (style.css:6843), and the inputs keep
   their light-mode grey border (#ADADAD) and placeholder (#898989).
   On this card we repaint the surface deep ink, so everything sitting
   on it has to be re-lit. Selectors carry one extra class to out-rank
   the style.css !important rules. */
.active-body .team-direct-form .custom-form h2 {
  color: var(--novix-text-on-dark) !important;
}
.active-body .team-direct-form .custom-form .ibt-btn.ibt-btn-outline {
  color: var(--novix-text-on-dark) !important;
}
.active-body .team-direct-form .custom-form input,
.active-body .team-direct-form .custom-form textarea {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--novix-text-on-dark);
}
.active-body .team-direct-form .custom-form input::-webkit-input-placeholder,
.active-body .team-direct-form .custom-form textarea::-webkit-input-placeholder {
  color: var(--novix-muted-on-dark);
}
.active-body .team-direct-form .custom-form input::-moz-placeholder,
.active-body .team-direct-form .custom-form textarea::-moz-placeholder {
  color: var(--novix-muted-on-dark);
}
.active-body .team-direct-form .custom-form input::placeholder,
.active-body .team-direct-form .custom-form textarea::placeholder {
  color: var(--novix-muted-on-dark);
}

/* Bio block to "Professional experience": Aiero's 101px stock margin
   (style.css:30344) made the bio and the timeline read as two islands.
   64px keeps them one column of content. Same-specificity override,
   later file wins (also out-cascades the 80px tablet media rule). */
.team-detail .sec-title {
  margin-bottom: 64px;
}

/* Pull quote on the team pages: one line of the director's philosophy,
   set between the two bio paragraphs. Gilroy with a vertical brand-
   gradient bar. blockquote is not covered by style.css's .active-body
   element list, so dark mode needs its own colour. */
.team-pull-quote {
  position: relative;
  margin: 34px 0;
  padding: 6px 0 6px 30px;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--novix-ink);
}
.team-pull-quote::before {
  content: "";
  position: absolute;
  left: 0;
  /* Inset by the blockquote's 25px corner radius (style.css:34854) so
     the bar sits flush with the straight part of the card edge instead
     of overlapping the curves. */
  top: 25px;
  bottom: 25px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--novix-light-blue) 0%,
    var(--novix-dark-blue)  35%,
    var(--novix-purple)     70%,
    var(--novix-pink)       100%);
}
.active-body .team-pull-quote {
  color: var(--novix-text-on-dark);
}
@media (max-width: 991px) {
  .team-pull-quote {
    font-size: 22px;
  }
}

/* Client testimonial slot on the team pages (renders only when the
   page supplies $member['testimonial']). Centred, quiet, no card
   chrome — the words are the feature. */
.team-testimonial blockquote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.team-testimonial blockquote p {
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--novix-ink);
  margin-bottom: 18px;
}
.team-testimonial cite {
  font-style: normal;
  font-size: 15px;
  color: var(--novix-muted-text);
}
.active-body .team-testimonial cite {
  color: var(--novix-muted-on-dark);
}
@media (max-width: 991px) {
  .team-testimonial blockquote p {
    font-size: 22px;
  }
}

/* Leadership cross-links at the foot of each team page. Reuses Aiero's
   .team-card; the ::after on the name link stretches the click target
   across the whole card (the share-box sits at z-index 999, so the
   LinkedIn link stays clickable above it). */
.team-cross-card .name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* Aiero's dark-mode border for team cards is near-black
   (--color-content-black2, style.css:6894), which vanishes against the
   ink-tint page background — the card outlines disappeared when
   toggling to dark. Same-specificity override, later file wins. */
.active-body .team-content {
  border-color: rgba(255, 255, 255, 0.16);
}

/* Section-level cross.png decoration on team-single. Aiero places
   the cross inside .team-detail-info, relying on the absolute
   resolving up to .team-detail-sec since neither .team-detail-info
   nor .col-lg-5 is positioned in the stock template.

   We made .col-lg-5 position: sticky (for the contact column to
   track scroll). Sticky is a positioned value, so the absolute
   img then resolved to the column, not the section, and got
   trapped inside the column's stacking context behind the form.

   Fix: move the img out of the column and anchor it to the section
   directly via .team-detail-cross. Same Aiero coordinates
   (bottom-left of the section). z-index: -1 inside the section's
   isolation: isolate context keeps it behind text but visible
   against the section background. */
.team-detail-cross {
  position: absolute;
  bottom: 163px;
  left: 49px;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 991px) {
  .team-detail-cross {
    display: none;
  }
}

/* Sticky left column on team-single pages: the photo + contact card
   + form follow the visitor down the page while they read the bio
   and experience timeline on the right. Only enabled at lg+ where
   the two columns are actually side-by-side; on mobile the layout
   stacks so sticky has nothing to anchor against. The 100px top
   offset clears the absolute-positioned site header. */
@media (min-width: 992px) {
  .team-detail-sec .col-lg-5 {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}

/* Selected work / capability cards on team-single page. Each card
   shows a domain heading and a bullet list of items. Sits inside a
   Swiper carousel so we can show many cards on a small footprint;
   user navigates via arrows + dots. */
.selected-work .achievements-swiper {
  position: relative;
  /* Bottom padding reserves the dots/arrows row; 40px is the minimum
     that still clears the 36px arrow buttons. */
  padding: 0 0 40px;
}
.selected-work .achievements-swiper .swiper-button-next,
.selected-work .achievements-swiper .swiper-button-prev {
  color: var(--novix-ink);
  top: auto;
  bottom: 0;
  width: 36px;
  height: 36px;
}
.selected-work .achievements-swiper .swiper-button-prev { left: auto; right: 50px; }
.selected-work .achievements-swiper .swiper-button-next { right: 0; }
.selected-work .achievements-swiper .swiper-button-next::after,
.selected-work .achievements-swiper .swiper-button-prev::after {
  font-size: 18px;
  font-weight: 700;
}
.selected-work .achievements-swiper .swiper-pagination {
  bottom: 10px;
  text-align: left;
  width: auto;
  left: 0;
}
.selected-work .achievements-swiper .swiper-pagination-bullet {
  background: var(--novix-rule);
  opacity: 1;
  width: 8px;
  height: 8px;
}
.selected-work .achievements-swiper .swiper-pagination-bullet-active {
  background: var(--novix-light-blue);
  width: 24px;
  border-radius: 4px;
}
.active-body .selected-work .achievements-swiper .swiper-button-next,
.active-body .selected-work .achievements-swiper .swiper-button-prev {
  color: var(--novix-paper);
}
.active-body .selected-work .achievements-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.2);
}

.selected-work .work-card {
  background: var(--novix-paper-soft);
  border-radius: 16px;
  padding: 28px 28px 24px;
  height: 100%;
  /* No bottom margin: slides never stack vertically in the swiper, so
     it only pushed the dots/arrows row further from the cards. */
  margin-bottom: 0;
}
.selected-work .work-card .title {
  margin: 0 0 16px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--novix-ink);
}
.selected-work .work-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.selected-work .work-card li {
  font-size: 15px;
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
  color: var(--novix-text-on-light);
}
.selected-work .work-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--novix-light-blue);
}
.active-body .selected-work .work-card {
  background: var(--novix-ink-elev-1);
}
.active-body .selected-work .work-card .title,
.active-body .selected-work .work-card li {
  color: var(--novix-paper);
}

/* Footer "Edinburgh & London" headline: reduced 20% from Aiero defaults */
.about-widget .title {
  font-size: 84px;
  line-height: 68px;
}
@media (max-width: 1201px) {
  .about-widget .title {
    font-size: 68px;
  }
}
@media (max-width: 1025px) {
  .about-widget .title {
    font-size: 41px;
  }
}
@media (max-width: 769px) {
  .about-widget .title {
    font-size: 68px;
  }
}
@media (max-width: 577px) {
  .about-widget .title {
    font-size: 46px;
  }
}
@media (max-width: 480px) {
  .about-widget .title {
    font-size: 34px;
    line-height: 50px;
  }
}
@media (max-width: 390px) {
  .about-widget .title {
    font-size: 30px;
    line-height: 34px;
  }
}

/* ----------------------------------------------------------------
   Comparison table (.compare-table) — first used on the Microsoft Office
   vs Office.eu page. style.css only styles the shop cart tables, so this
   is the general-purpose comparison surface: bordered cells on
   --novix-rule, a header row on the elevated paper surface, and re-lit
   borders/headings in dark mode (style.css gives dark mode no table
   treatment at all). The wrapper scrolls horizontally below tablet width
   so the table never breaks the column. */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 40px;
}
.compare-table {
  min-width: 640px;
  margin-bottom: 0;
}
.compare-table th,
.compare-table td {
  border: 1px solid var(--novix-rule);
  padding: 14px 18px;
  vertical-align: top;
  font-size: 16px;
  line-height: 26px;
}
.compare-table thead th,
.compare-table tbody th {
  font-weight: 600;
  color: var(--novix-ink);
}
.compare-table thead th {
  background: var(--novix-paper-elev-3);
}
.active-body .compare-table th,
.active-body .compare-table td {
  border-color: rgba(255, 255, 255, 0.14);
}
.active-body .compare-table thead th,
.active-body .compare-table tbody th {
  color: var(--novix-text-on-dark);
}
.active-body .compare-table thead th {
  background: var(--novix-ink-tint);
}

/* Visually-hidden text utility (screen readers only). Used to give the
   tick/dash cells in the plans matrix an accessible "Included" /
   "Not included" label without showing it. */
.vis-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------
   Plans feature matrix (.plans-matrix on /plans). A purpose-built,
   branded version of the comparison table: tier headers carry the
   price, the Build column is highlighted as the popular choice,
   capabilities are grouped into labelled bands, and inclusion is
   shown with a brand tick rather than the word "Yes". */
.plans-matrix {
  width: 100%;
  min-width: 680px;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--novix-rule);
  border-radius: 16px;
  overflow: hidden;
}
.plans-matrix th,
.plans-matrix td {
  border-bottom: 1px solid var(--novix-rule);
  padding: 14px 18px;
  vertical-align: middle;
}
.plans-matrix tbody tr:last-child th,
.plans-matrix tbody tr:last-child td {
  border-bottom: 0;
}
/* Column headers: deep ink band, tier name over price. */
.plans-matrix thead th {
  background: var(--novix-ink);
  color: var(--novix-text-on-dark);
  text-align: center;
  vertical-align: bottom;
  padding: 22px 18px 20px;
  border-bottom: 0;
}
.plans-matrix thead th:first-child {
  text-align: left;
  vertical-align: bottom;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--novix-muted-on-dark);
}
.plans-matrix .matrix-plan {
  display: block;
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
}
.plans-matrix .matrix-price {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--novix-light-blue);
}
.plans-matrix .matrix-price small {
  font-size: 12px;
  font-weight: 500;
  color: var(--novix-muted-on-dark);
}
/* Popular tag on the Build header. */
.plans-matrix .matrix-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--novix-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Row label column. */
.plans-matrix tbody th {
  text-align: left;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: var(--novix-ink);
}
.plans-matrix tbody td {
  text-align: center;
  width: 130px;
}
/* Grouped band rows that break the list into scannable sections. */
.plans-matrix .matrix-group th {
  background: var(--novix-paper-elev-3);
  font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--novix-ink);
}
/* Zebra striping on the feature rows (not the group bands). */
.plans-matrix tbody tr:not(.matrix-group):nth-of-type(even) th,
.plans-matrix tbody tr:not(.matrix-group):nth-of-type(even) td {
  background: var(--novix-paper-soft);
}
/* Tick / dash marks. */
.plans-matrix .m-yes i {
  color: var(--novix-light-blue);
  font-size: 17px;
}
.plans-matrix .m-no span[aria-hidden]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--novix-rule);
  vertical-align: middle;
}
/* Highlight the Build column (3rd cell in every row) as the popular pick. */
.plans-matrix tr > *:nth-child(3) {
  background: rgba(10, 211, 251, 0.07);
}
.plans-matrix thead th.col-pop {
  background: var(--novix-ink-elev-1);
}
.plans-matrix .matrix-group th.col-pop,
.plans-matrix tbody tr:not(.matrix-group):nth-of-type(even) td:nth-child(3) {
  background: rgba(10, 211, 251, 0.12);
}

/* Dark mode: re-light the borders and the row labels; keep the ink
   header and the Build highlight, which already read on dark. */
.active-body .plans-matrix {
  border-color: rgba(255, 255, 255, 0.14);
}
.active-body .plans-matrix th,
.active-body .plans-matrix td {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.active-body .plans-matrix tbody th {
  color: var(--novix-text-on-dark);
}
.active-body .plans-matrix .matrix-group th {
  background: var(--novix-ink-tint);
  color: var(--novix-text-on-dark);
}
.active-body .plans-matrix tbody tr:not(.matrix-group):nth-of-type(even) th,
.active-body .plans-matrix tbody tr:not(.matrix-group):nth-of-type(even) td {
  background: rgba(255, 255, 255, 0.04);
}
.active-body .plans-matrix .m-no span[aria-hidden]::before {
  background: rgba(255, 255, 255, 0.25);
}
.active-body .plans-matrix tr > *:nth-child(3) {
  background: rgba(10, 211, 251, 0.10);
}

/* The comparison page's in-body section headings (h3 between the table
   and the bullet lists). .ser-detail only styles its h2 .title, so give
   the h3s their breathing room here. */
/* Section rhythm inside .ser-detail. style.css ships big, uneven gaps
   (h3 had no system, lists carry a 35px top margin, paragraphs 30px),
   which left ragged whitespace between the h3 sections on the plans and
   tier pages. Even the rhythm: clear separation ABOVE each h3, tight
   heading-to-text, and contained list spacing. */
.ser-detail h3 {
  margin: 44px 0 14px;
}
.ser-detail h3:first-child {
  margin-top: 0;
}
.ser-detail .ser-detail-list {
  margin-top: 18px;
  margin-bottom: 10px;
}
.ser-detail .faq-sec4 {
  margin-top: 60px;
}

/* Two-button call-to-action row at the foot of the tier plan pages
   (launch/build/scale). Aiero's .ibt-btn is inline-flex with no sibling
   spacing, so wrap them in a flex row that wraps on narrow screens. */
.ser-detail .ser-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* ----------------------------------------------------------------
   Privacy policy body (.privacy-body on privacy-policy.php).
   Long-form legal text in a centred column. The service-page
   .ser-detail typography is too heavy for this (55px titles,
   700-weight paragraphs), so the policy carries its own lighter
   scale. Dark mode needs nothing here: Aiero's global .active-body
   rules already force headings, paragraphs and list items white. */
.privacy-body .policy-updated {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--novix-dark-blue);
  margin: 0 0 24px;
}
.privacy-body h2 {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 48px 0 0;
}
.privacy-body p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 16px 0 0;
}
.privacy-body ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.privacy-body ul li {
  position: relative;
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 8px 0 0;
  padding-left: 30px;
}
.privacy-body ul li i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  color: var(--novix-dark-blue);
}
.privacy-body a {
  color: var(--novix-dark-blue);
  text-decoration: underline;
}

/* ----------------------------------------------------------------
   Downtime cost calculator (.downtime-tool on downtime-calculator.php).
   The site's first interactive tool page. Two panels side by side on
   desktop (inputs left, results right), stacked on mobile. Panels sit on
   the elevated paper surface in light mode and the ink-tint surface in
   dark mode, matching the rest of the brand layer. No new JS file: the
   calculation is a small inline script on the page. */
.downtime-intro {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.downtime-intro .sub-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novix-light-blue-shade);
  margin-bottom: 14px;
}
.downtime-intro .title {
  margin-bottom: 20px;
}
.downtime-intro p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 0 0 16px;
}

.downtime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 991px) {
  .downtime-grid {
    grid-template-columns: 1fr;
  }
}

.downtime-panel {
  background: var(--novix-paper-elev-3);
  border: 1px solid var(--novix-rule);
  border-radius: 20px;
  padding: 36px;
}
.downtime-panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novix-dark-blue);
  margin: 0 0 28px;
}

.downtime-field {
  margin-bottom: 22px;
}
.downtime-field:last-child {
  margin-bottom: 0;
}
.downtime-field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--novix-ink);
  margin-bottom: 8px;
}
.downtime-field input {
  width: 100%;
  padding: 13px 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--novix-ink);
  background: var(--novix-paper);
  border: 1px solid var(--novix-rule);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.downtime-field input:focus {
  border-color: var(--novix-dark-blue);
  box-shadow: 0 0 0 3px rgba(15, 119, 249, 0.15);
}
.downtime-field .field-hint {
  font-size: 13px;
  line-height: 20px;
  color: #676767;
  margin: 7px 0 0;
}

/* Prefix/suffix wrap for the £ sign and the "× salary" note. */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap .input-prefix {
  position: absolute;
  left: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #676767;
  pointer-events: none;
}
.input-wrap .input-prefix ~ input {
  padding-left: 30px;
}
.input-wrap .input-suffix {
  position: absolute;
  right: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #676767;
  pointer-events: none;
}

/* Weeks / days / hours sit on one row on desktop. */
.downtime-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.downtime-field-row .downtime-field {
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .downtime-field-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Results panel. */
.downtime-headline {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--novix-rule);
}
.downtime-headline .value {
  display: block;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--gradient-3);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--novix-dark-blue);
}
.downtime-headline .label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #676767;
  margin-top: 6px;
}
.downtime-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.downtime-result {
  padding: 20px;
  background: var(--novix-paper);
  border: 1px solid var(--novix-rule);
  border-radius: 14px;
}
.downtime-result.downtime-result-feature {
  background: var(--gradient-btn-1);
  border-color: transparent;
}
.downtime-result .value {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--novix-ink);
}
.downtime-result .label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #676767;
  margin-top: 6px;
}
.downtime-result-feature .value,
.downtime-result-feature .label {
  color: var(--novix-text-on-dark);
}
.downtime-basis {
  font-size: 14px;
  line-height: 22px;
  color: #676767;
  margin: 24px 0 0;
}

/* Explainer below the tool. */
.downtime-explainer {
  max-width: 820px;
  margin: 48px auto 0;
}
.downtime-explainer-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--novix-ink);
  margin: 0 0 20px;
}
.downtime-explainer p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 16px 0 0;
}
.downtime-explainer a {
  color: var(--novix-dark-blue);
  text-decoration: underline;
}

/* Dark mode: panels move to the ink-tint surface, text and fields re-lit
   the way the team-direct-form is on the director pages. */
.active-body .downtime-intro p,
.active-body .downtime-explainer p,
.active-body .downtime-field .field-hint,
.active-body .downtime-headline .label,
.active-body .downtime-result .label,
.active-body .downtime-basis,
.active-body .input-wrap .input-prefix,
.active-body .input-wrap .input-suffix {
  color: var(--novix-muted-on-dark);
}
.active-body .downtime-intro .title,
.active-body .downtime-explainer-title,
.active-body .downtime-field label {
  color: var(--novix-text-on-dark);
}
.active-body .downtime-panel {
  background: var(--novix-ink-tint);
  border-color: rgba(255, 255, 255, 0.14);
}
.active-body .downtime-field input {
  color: var(--novix-text-on-dark);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
}
.active-body .downtime-field input:focus {
  border-color: var(--novix-light-blue);
  box-shadow: 0 0 0 3px rgba(10, 211, 251, 0.2);
}
.active-body .downtime-result {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.active-body .downtime-result .value {
  color: var(--novix-text-on-dark);
}
.active-body .downtime-result-feature {
  background: var(--gradient-btn-1);
}
.active-body .downtime-explainer a {
  color: var(--novix-light-blue);
}

/* ----------------------------------------------------------------
   Have You Been Hacked? (.hack-tool on have-you-been-hacked.php).
   The site's second interactive tool. Two checker panels side by side
   on desktop (password left, email right), a guidance block below, and
   colour-coded result states (clear / found / warn / error) that stay
   calm rather than alarming, per the no-fear cyber voice rule. Panels
   reuse the brand surface tokens the downtime tool established; the
   result-state tints are local to this block. No new JS file: the
   browser-side password check and the email fetch are inline on the
   page. */
.hack-intro {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.hack-intro .sub-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novix-light-blue-shade);
  margin-bottom: 14px;
}
.hack-intro .title {
  margin-bottom: 20px;
}
.hack-intro p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 0 0 16px;
}

.hack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 991px) {
  .hack-grid {
    grid-template-columns: 1fr;
  }
}

.hack-panel {
  background: var(--novix-paper-elev-3);
  border: 1px solid var(--novix-rule);
  border-radius: 20px;
  padding: 36px;
}
.hack-panel-kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--novix-dark-blue);
  margin-bottom: 12px;
}
.hack-panel-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--novix-ink);
  margin: 0 0 14px;
}
.hack-panel-lead {
  font-size: 15px;
  line-height: 25px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 0 0 24px;
}

.hack-form label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--novix-ink);
  margin-bottom: 8px;
}
.hack-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.hack-input-wrap input {
  width: 100%;
  padding: 13px 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--novix-ink);
  background: var(--novix-paper);
  border: 1px solid var(--novix-rule);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hack-input-wrap input:focus {
  border-color: var(--novix-dark-blue);
  box-shadow: 0 0 0 3px rgba(15, 119, 249, 0.15);
}
/* Show/hide toggle sits inside the password field. */
.hack-reveal {
  position: absolute;
  right: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--novix-dark-blue);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.hack-input-wrap input[type="password"],
.hack-input-wrap input[type="text"] {
  padding-right: 72px;
}
.hack-submit {
  width: 100%;
  justify-content: center;
}

/* Result panel: shared shell, state-specific accent. */
.hack-result {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--novix-rule);
  border-left-width: 4px;
  font-size: 15px;
  line-height: 24px;
  color: var(--novix-ink);
}
.hack-result strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
.hack-result span {
  display: block;
  font-weight: 500;
  color: var(--color-content-black2);
}
.hack-result-checking {
  border-left-color: var(--novix-rule);
  color: #676767;
}
.hack-result-clear {
  background: #ecfaf3;
  border-color: #cdeedd;
  border-left-color: #1f9d63;
}
.hack-result-found {
  background: #fff6e9;
  border-color: #f4e2c2;
  border-left-color: #c9871a;
}
.hack-result-warn {
  background: #fff6e9;
  border-color: #f4e2c2;
  border-left-color: #c9871a;
}
.hack-result-error {
  background: #fdeeee;
  border-color: #f3d2d2;
  border-left-color: #c0392b;
}
.hack-breach-list {
  margin: 12px 0 0;
  padding-left: 18px;
}
.hack-breach-list li {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: var(--novix-ink);
}

.hack-note {
  font-size: 13px;
  line-height: 20px;
  color: #676767;
  margin: 18px 0 0;
}

/* Email panel "coming soon" state (shown until an API key is configured). */
.hack-soon {
  padding: 24px;
  background: var(--novix-paper);
  border: 1px dashed var(--novix-rule);
  border-radius: 14px;
}
.hack-soon-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--novix-dark-blue);
  background: rgba(15, 119, 249, 0.1);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.hack-soon p {
  font-size: 15px;
  line-height: 25px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 0;
}
.hack-soon a {
  color: var(--novix-dark-blue);
  text-decoration: underline;
}

/* Guidance block below the two checkers. */
.hack-guidance {
  max-width: 820px;
  margin: 56px auto 0;
}
.hack-guidance-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--novix-ink);
  margin: 40px 0 16px;
}
.hack-guidance-title:first-child {
  margin-top: 0;
}
.hack-guidance p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin: 0 0 16px;
}
.hack-steps {
  margin: 0 0 16px;
  padding-left: 20px;
  counter-reset: hack-step;
}
.hack-steps li {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin-bottom: 14px;
}
.hack-steps li strong {
  color: var(--novix-ink);
  font-weight: 700;
}

/* Closing CTA inside the guidance block. */
.hack-cta {
  margin-top: 40px;
  padding: 36px;
  border-radius: 20px;
  background: var(--gradient-btn-1);
}
.hack-cta-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--novix-text-on-dark);
  margin: 0 0 14px;
}
.hack-cta p {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: var(--novix-text-on-dark);
  margin: 0 0 24px;
  opacity: 0.92;
}

/* Dark mode: panels move to the ink-tint surface and text is re-lit, the
   same treatment the downtime tool uses. The result-state tints keep their
   light fills but are dimmed slightly so they read on the dark panel. */
.active-body .hack-intro p,
.active-body .hack-panel-lead,
.active-body .hack-guidance p,
.active-body .hack-steps li,
.active-body .hack-note {
  color: var(--novix-muted-on-dark);
}
.active-body .hack-intro .title,
.active-body .hack-panel-title,
.active-body .hack-guidance-title,
.active-body .hack-form label,
.active-body .hack-steps li strong,
.active-body .hack-breach-list li {
  color: var(--novix-text-on-dark);
}
.active-body .hack-panel {
  background: var(--novix-ink-tint);
  border-color: rgba(255, 255, 255, 0.14);
}
.active-body .hack-input-wrap input {
  color: var(--novix-text-on-dark);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
}
.active-body .hack-input-wrap input:focus {
  border-color: var(--novix-light-blue);
  box-shadow: 0 0 0 3px rgba(10, 211, 251, 0.2);
}
.active-body .hack-input-wrap input::placeholder {
  color: var(--novix-muted-on-dark);
}
.active-body .hack-reveal {
  color: var(--novix-light-blue);
}
.active-body .hack-result {
  color: var(--novix-text-on-dark);
}
.active-body .hack-result span {
  color: var(--novix-muted-on-dark);
}
.active-body .hack-result-clear {
  background: rgba(31, 157, 99, 0.16);
  border-color: rgba(31, 157, 99, 0.3);
  border-left-color: #34c27e;
}
.active-body .hack-result-found,
.active-body .hack-result-warn {
  background: rgba(201, 135, 26, 0.16);
  border-color: rgba(201, 135, 26, 0.32);
  border-left-color: #e0a43b;
}
.active-body .hack-result-error {
  background: rgba(192, 57, 43, 0.16);
  border-color: rgba(192, 57, 43, 0.32);
  border-left-color: #e06453;
}
.active-body .hack-soon {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.2);
}
.active-body .hack-soon p {
  color: var(--novix-muted-on-dark);
}
.active-body .hack-soon a,
.active-body .hack-soon-badge {
  color: var(--novix-light-blue);
}
.active-body .hack-soon-badge {
  background: rgba(10, 211, 251, 0.12);
}