/* Typography matched to fusalogix.com — Montserrat (display headings/numbers) + Roboto (body/UI). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* CSS Variables for design system based on user-provided color schemes */
:root {
  /* Main Brand Colors */
  --color-navy: #00003B;         /* Depth, stability, professionalism */
  --color-purple: #49299A;       /* Creativity, luxury, and ambition */
  --color-lavender: #E8E8FC;     /* Calmness, serenity, and clarity */
  
  /* Secondary Accent Colors */
  --color-red: #2f5fd0;          /* Passion, energy, bold statement accent */
  --color-red-hover: #2952b8;
  --color-cyan-1: #4d7fe6;       /* Freshness, tranquility, clarity */
  --color-cyan-2: #7fa0ee;       /* Cyan variant 2 */
  --color-cyan-3: #c2d4f7;       /* Cyan variant 3 */
  
  /* Neutral Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-text-dark: #00003B;
  --color-text-light: #E8E8FC;
  --color-text-muted: rgba(232, 232, 252, 0.7);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  
  /* Color Shades & Blends — 10-step tint ramps from the brand guide (1 = full brand color, 10 = near white) */
  --navy-1: #00003B; --navy-2: #1A1A4F; --navy-3: #343463; --navy-4: #4E4E77; --navy-5: #68688B;
  --navy-6: #82829F; --navy-7: #9C9CB3; --navy-8: #B6B6C7; --navy-9: #D1D1DB; --navy-10: #EBEBEF;
  --navy-d1: #00002F; --navy-d2: #000023; --navy-d3: #000018;

  --purple-1: #49299A; --purple-2: #5C3FA4; --purple-3: #6E55AF; --purple-4: #816BB9; --purple-5: #9381C3;
  --purple-6: #A696CE; --purple-7: #B9ACD8; --purple-8: #CBC2E2; --purple-9: #DED8ED; --purple-10: #F0EEF7;
  --purple-d1: #3A217B; --purple-d2: #2C195C; --purple-d3: #1D103E;

  --lavender-1: #E8E8FC; --lavender-2: #EAEAFC; --lavender-3: #EDEDFD; --lavender-4: #EFEFFD; --lavender-5: #F1F1FD;
  --lavender-6: #F4F4FE; --lavender-7: #F6F6FE; --lavender-8: #F8F8FE; --lavender-9: #FBFBFE; --lavender-10: #FDFDFF;

  --red-1: #2f5fd0; --red-2: #3a68d4; --red-3: #4571d8; --red-4: #507adc; --red-5: #5b83e0;
  --red-6: #6f93e6; --red-7: #83a3ec; --red-8: #a7bff2; --red-9: #cbd7f7; --red-10: #e9effb;

  --cyan-1: #4d7fe6; --cyan-2: #5f88e8; --cyan-3: #7191ea; --cyan-4: #839bec; --cyan-5: #95a4ee;
  --cyan-6: #a7adf0; --cyan-7: #b9b7f2; --cyan-8: #cbc4f5; --cyan-9: #ddd3f8; --cyan-10: #eff2fb;

  --gray-1: #000000; --gray-2: #1A1A1A; --gray-3: #343434; --gray-4: #4E4E4E; --gray-5: #686868;
  --gray-6: #828282; --gray-7: #9C9C9C; --gray-8: #B6B6B6; --gray-9: #D1D1D1; --gray-10: #EBEBEB;

  /* Fonts — Montserrat (display headings/numbers) + Roboto (body/UI), matched to fusalogix.com */
  --font-heading: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  
  /* Shadows & Glows */
  --shadow-purple: 0 8px 30px rgba(73, 41, 154, 0.08);
  --shadow-glow-cyan: 0 0 15px rgba(0, 204, 204, 0.3);
  --shadow-glow-red: 0 0 20px rgba(204, 0, 59, 0.25);
  --shadow-glow-purple: 0 0 25px rgba(73, 41, 154, 0.25);
  
  /* Transitions */
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --header-height: 80px;
}

/* Global resets & base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
}

/* Scrollbar: use the browser default (no custom color/width) */

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  color: var(--color-white);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

h1 span.highlight-teal {
  color: var(--color-cyan-1);
  background: linear-gradient(135deg, var(--color-cyan-1) 30%, var(--color-cyan-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 span.highlight-red {
  color: var(--color-red);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--color-navy);
  margin-bottom: 1.5rem;
  position: relative;
}

/* Decorative underline for H2 in light sections */
h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-purple), var(--color-red));
  margin-top: 0.75rem;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.hero h1::after, .final-cta h2::after {
  display: none; /* No underline in hero or CTA */
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: var(--color-purple);
  margin-bottom: 0.75rem;
}

p {
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
  color: rgba(0, 0, 59, 0.8);
}

p.sub-headline {
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 300;
  color: var(--color-lavender);
  max-width: 860px;
  line-height: 1.65;
  margin-bottom: 2rem;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

/* Button & interactive components - dual gradient premium style */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-cyan-1) 0%, var(--color-cyan-2) 100%);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem 2.2rem;
  border-radius: 6px 12px 28px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(77, 127, 230, 0.28);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Canonical hover flush — identical to the homepage (style.css) and the
     shared header CTA (site-chrome.css) so every button on every page
     behaves the same. Do not fork this per page. */
  background: linear-gradient(135deg, #49299a 0%, #00003b 100%);
  opacity: 0;
  z-index: -1;
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(73, 41, 154, 0.35);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-cyan-1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem 2.2rem;
  border-radius: 6px 12px 28px;
  border: 2px solid var(--color-cyan-1);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-ghost:hover {
  background: linear-gradient(135deg, #2a4fbf 0%, #12296e 100%);
  border-color: transparent;
  color: var(--color-white);
  box-shadow: 0 8px 25px rgba(20, 40, 120, 0.4);
  transform: translateY(-3px);
}

/* Glassmorphic navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(0, 0, 59, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  z-index: 1000;
  transition: var(--transition-smooth);
}

.navbar-scrolled {
  background: rgba(0, 0, 59, 0.95);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 38px;
  height: 38px;
  fill: var(--color-cyan-1);
  filter: drop-shadow(0 0 5px rgba(0, 204, 204, 0.5));
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.7px;
}

.logo-text span {
  color: var(--color-cyan-1);
  transition: var(--transition-smooth);
}

.logo:hover .logo-text span {
  color: var(--color-red);
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2.2rem;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-lavender);
  position: relative;
  padding: 0.5rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--color-cyan-1), var(--color-red));
  transition: var(--transition-smooth);
}

.nav-link:hover, .nav-link.active {
  color: var(--color-white);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--color-cyan-1);
}

.hamburger {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--color-white);
}

.hamburger-line {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: var(--color-white);
  transition: var(--transition-smooth);
}

/* General Layout sections (vertical rhythm is set below by the section
   padding-block rule; horizontal padding stays 8%). */
section {
  padding: 120px 8%;
  position: relative;
}

/* Page Hero layout */
.hero {
  min-height: 80vh;
  background: radial-gradient(circle at 75% 25%, #181163 0%, var(--color-navy) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 100px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
  /* Own stacking context, so the hero's decorative layers can never punch
     through the gradient background or bleed onto the section below. */
  isolation: isolate;
}


/* Strip the hero's decorative overlays — the animated dot grid (::before), the
   brand glow shard (::after), the floating triangles (.hero-shards) and the
   ghosted "2019" numeral (.hero-figure) — leaving a clean gradient field (or,
   on About, just the video and its darkening overlay) behind the content.

   This is the hero every page except the homepage now uses. The Platform and
   Blog pages already got it for free by carrying `page-about` on the body; the
   interior families are listed explicitly so they match rather than depending
   on that. Without it they paint a 434px translucent shard across the hero plus
   an animated dot grid still built from the OLD teal/crimson palette — which is
   what made them look unlike the Platform pages.

   The homepage (.hero outside these scopes) keeps its decorations. .page-blog
   deliberately re-enables ::before for its own dot texture, in resources.css. */
.page-about .hero::before,
.page-about .hero::after,
.page-about .hero-shards,
.page-about .hero-figure,
.page-industry .hero::before,
.page-industry .hero::after,
.page-industry .hero-shards,
.page-industry .hero-figure,
.page-services .hero::before,
.page-services .hero::after,
.page-services .hero-shards,
.page-services .hero-figure,
.page-contact .hero::before,
.page-contact .hero::after,
.page-contact .hero-shards,
.page-contact .hero-figure { display: none !important; }

/* About's hero uses the same compact interior-hero box (54vh) and the page's
   standard 8% content gutter; the top spacing matches every other page's hero. */
.page-about .hero {
  justify-content: flex-start;
  min-height: 54vh;
  padding: clamp(40px, 4.6vw, 66px) 8% 66px;
  border-bottom: none;
}

/* ============ Faceted-shield hero background (js/hero-aegis.js) ============
   The four security.core engines arming around a vehicle, threats breaking on
   the rim, the mandates locking on, then the shell closing and being certified.
   Swapped in from the home hero; the lifecycle span that used to be here went
   the other way, into the home orb.

   A background rather than the contained figure the Services and Industries
   heroes use, because this hero carries the stat strip INSIDE it — a two-column
   grid would have to fight that strip for the same row. The script keeps its
   composition in a box in the upper right for the same reason, and the mask
   below fades whatever reaches toward the copy column.

   .hero already sets position: relative, overflow: hidden and isolation:
   isolate above, so z-index -1 lands above the gradient and below every piece
   of copy without any content element needing its own z-index. */
.page-about .hero .hero-story {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85) 48%, #000 56%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85) 48%, #000 56%);
}
/* Stacked hero. The canvas used to be hidden here, because a right-anchored
   band behind full-width copy is illegible at phone size. Instead of hiding it,
   it LEAVES the background: position goes static, `order` puts it last in the
   hero's flex column, and it becomes a figure under the copy — the same move
   .page-svc-anim already makes when its two-column hero stacks. The mask goes
   with it, since there is no longer a copy column on the left to protect, and
   the script spans the full width once it sees this breakpoint. */
@media (max-width: 900px) {
  /* Heading -> animation -> content, the order the home page hero uses when it
     stacks (style.css .hero-wrap). The h1 and the sub-headline sit in the same
     .hero-content div, so the canvas cannot slot between them as a sibling.
     display: contents drops that wrapper's box for LAYOUT only, promoting its
     children to direct flex items of .hero so all three can be ordered. Safe
     here because .hero is already align-items: flex-start / text-align: left —
     exactly what .hero-content was contributing — so only its max-width has to
     be handed down. Its .fade-up.visible end state is opacity 1 / no transform,
     so losing the box costs no animation either. */
  .page-about .hero .hero-content { display: contents; }
  .page-about .hero .hero-content > * { max-width: 64ch; }
  .page-about .hero .hero-content > h1 { order: 1; }
  .page-about .hero .hero-content > :not(h1) { order: 3; }
  .page-about .hero .stat-strip { order: 4; }

  .page-about .hero .hero-story {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: clamp(250px, 40vh, 330px);
    /* Sits between the heading and the copy now, so it needs room on both. */
    margin: clamp(18px, 4vw, 30px) 0 clamp(8px, 2.5vw, 18px);
    z-index: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* The point-tunnel hero background (js/hero-tunnel.js) used to be styled here.
   It has been removed from all 35 interior heroes: the scattered points read as
   noise across the whole band rather than as a halo around the hero graphic,
   and every hero already carries its own purpose-built animation on the right.
   Each hero's gradient plus that animation is now the whole background.

   The script is still on disk, unwired, so this is reversible — re-add the
   canvas as the first child of .hero, re-add the rule below, and load the
   script. Nothing else referenced it. */

/* ============ Message-exchange hero background (js/contact-hero.js) ========
   Just the exchange this page exists for: a message typed, sent, and answered
   with the page's own sentence — "we'll get this to the right person". No
   services taxonomy, so nobody has to know what UN R155 is to read it.

   Same layering and mask logic as .page-about .hero-story above; kept as its
   own rule rather than a shared selector because the two heroes sit at
   different heights and may want to diverge. */
.page-contact .hero .hero-story {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85) 48%, #000 56%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85) 48%, #000 56%);
}
/* Same stacked treatment and same heading -> animation -> content ordering as
   .page-about above — see the note there. */
@media (max-width: 900px) {
  .page-contact .hero .hero-content { display: contents; }
  .page-contact .hero .hero-content > * { max-width: 60ch; }
  .page-contact .hero .hero-content > h1 { order: 1; }
  .page-contact .hero .hero-content > :not(h1) { order: 3; }

  .page-contact .hero .hero-story {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: clamp(250px, 40vh, 330px);
    margin: clamp(18px, 4vw, 30px) 0 clamp(8px, 2.5vw, 18px);
    z-index: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
}
/* .hero-content's own box carried this indent; display: contents above drops it,
   so hand it to the children that were inside it. */
@media (max-width: 420px) {
  .page-contact .hero .hero-content > * { padding-left: 20px; }
}

/* --- Stat strip merged into the hero -----------------------------------------
   Instead of a separate purple band, the stats sit at the base of the hero,
   spaced away from the copy rather than divided from it. No hard section seam.

   There is deliberately no darkening plate behind them: one used to lift the
   stats off the dashboard footage, but with the hero back to its plain gradient
   that plate read as a rectangular block with a visible vertical seam where its
   edges stopped short of the viewport. The bare gradient is uniform, and the
   stats have plenty of contrast against it on their own. */
.page-about .hero .stat-strip {
  width: 100%;
  margin-top: auto;                 /* pin to the base of the hero */
  /* No hairline divider — space alone separates the stats from the copy. Kept
     modest so it doesn't undo the hero's compact height; the hero's own 66px
     bottom padding is the room beneath, so the strip adds none of its own. */
  padding: clamp(34px, 5vh, 64px) 0 0;
  position: relative;
  z-index: 10;
}

/* ===== Content-matched icon in a dark section's empty top corner ============
   Sits beside the centered heading (never over the copy or the cards below),
   alternating --left / --right page to page. Only shown on wide screens where
   there is clear empty space; hidden otherwise so it can never crowd content. */
/* The .sec-mark section icons used to live here — a purple line glyph at 50%
   opacity, pinned near the top corner of a band on 21 pages. They have been
   removed along with their markup. The reviewed background emblems
   (.band-emblem, further down this file) now carry that job, and running both
   put two ornaments in the same band fighting for the same corner. Nothing
   references .sec-mark any more; the rules are gone rather than left dead. */

/* Glowing overlay motif */
.hero::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -10%;
  width: 50%;
  height: 350px;
  background: radial-gradient(circle, rgba(73, 41, 154, 0.4) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* Animated node background pattern */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(rgba(0, 204, 204, 0.08) 1.5px, transparent 1.5px), 
    radial-gradient(rgba(204, 0, 59, 0.12) 1.5px, transparent 1.5px);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
  opacity: 0.7;
  pointer-events: none;
  animation: bgScroll 80s linear infinite;
}

@keyframes bgScroll {
  from { background-position: 0 0, 25px 25px; }
  to { background-position: 1000px 1000px, 1025px 1025px; }
}

.breadcrumb {
  display: flex;
  list-style: none;
  gap: 0.6rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(232, 232, 252, 0.7);
  z-index: 10;
}

.breadcrumb a {
  transition: var(--transition-smooth);
}

.breadcrumb a:hover {
  color: var(--color-cyan-1);
}

.breadcrumb li::after {
  content: '/';
  margin-left: 0.6rem;
  color: rgba(232, 232, 252, 0.3);
}

.breadcrumb li:last-child::after {
  content: '';
}

.breadcrumb-active {
  color: var(--color-cyan-1);
  font-weight: 600;
}

.hero-content {
  max-width: 960px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-cta {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.25rem;
}

/* Stat strip credibility component (Purple Background) */
.stats {
  background-color: var(--color-purple);
  padding: 60px 8%;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 10;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
  position: relative;
  padding: 10px;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1.25rem;
  top: 15%;
  height: 70%;
  width: 1.5px;
  background-color: rgba(255, 255, 255, 0.15);
}

.stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-cyan-1);
  text-shadow: 0 0 10px rgba(0, 204, 204, 0.2);
  margin-bottom: 0.5rem;
}

/* Red counter highlight for a bold accent touch */
.stat-item:nth-child(2) .stat-num {
  color: var(--color-red);
  text-shadow: 0 0 10px rgba(204, 0, 59, 0.3);
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-lavender);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Who We Are & prose storytelling */
.who, .expertise {
  background-color: var(--color-white);
  display: flex;
  justify-content: center;
}

.prose-container {
  max-width: 820px;
  text-align: center;
}

.prose-container h2 {
  margin-bottom: 2.5rem;
  display: inline-block;
}

.prose-container p {
  color: rgba(0, 0, 59, 0.85);
  font-size: 1.15rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
  text-align: justify;
}

/* Bold highlighted inline items */
.prose-container strong {
  color: var(--color-red);
  font-weight: 700;
}

/* Vision block styling (Navy background) */
.vision {
  background: radial-gradient(circle at 20% 80%, #0d0d4a 0%, var(--color-navy) 100%);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vision h2 {
  color: var(--color-white);
}

.vision h2::after {
  background: linear-gradient(90deg, var(--color-cyan-1), var(--color-cyan-2));
  margin: 0.75rem auto 0 auto;
}

.vision-card {
  max-width: 850px;
  background: rgba(73, 41, 154, 0.18);
  border-left: 5px solid var(--color-red);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  padding: 3.5rem;
  border-radius: 4px;
  position: relative;
  margin-top: 3rem;
  transition: var(--transition-smooth);
}

.vision-card:hover {
  border-left-color: var(--color-cyan-1);
  box-shadow: var(--shadow-glow-purple);
  transform: translateY(-3px);
}

.vision-card::before {
  content: '"';
  position: absolute;
  top: -15px;
  left: 25px;
  font-family: var(--font-heading);
  font-size: 9rem;
  color: var(--color-cyan-1);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}

.vision-text {
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 300;
  color: var(--color-white);
  margin-bottom: 1.75rem;
  line-height: 1.65;
}

.vision-footer {
  font-weight: 700;
  color: var(--color-cyan-1);
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}

/* Grid cards for value pillars / disciplines */
.pillars, .caps {
  background-color: var(--color-white);
}

.grid-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 5rem auto;
}

.grid-header h2 {
  display: inline-block;
}

.grid-header h2::after {
  margin: 0.75rem auto 0 auto;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: var(--color-white);
  border: 1.5px solid rgba(232, 232, 252, 0.8);
  padding: 3rem 2.5rem;
  border-radius: 16px;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  /* --shadow-purple-hover is never defined, but this line is dead: the editorial
     tile override further down redeclares .card:hover at the same specificity
     with a literal shadow, so the cascade picks that and this is never applied.
     Don't "fix" the token — change the literal instead. */
  box-shadow: var(--shadow-purple-hover);
}

.card-num {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(73, 41, 154, 0.1);
  line-height: 1;
  margin-bottom: 1.25rem;
  transition: var(--transition-smooth);
}

.card:hover .card-num {
  color: var(--color-cyan-1);
  transform: scale(1.08) translateX(3px);
}

/* Red counter variant for cards on hover */
.card:nth-child(2n):hover .card-num {
  color: var(--color-red);
}

.card-title {
  font-size: 1.35rem;
  color: var(--color-navy);
  margin-bottom: 1rem;
  font-weight: 700;
}

.card-desc {
  color: rgba(0, 0, 59, 0.72);
  font-size: 0.98rem;
  flex-grow: 1;
  line-height: 1.6;
}

.card-link {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-purple);
  font-weight: 700;
  font-size: 0.95rem;
}

.card-link:hover {
  color: var(--color-red);
}

.card-link::after {
  content: '→';
  transition: var(--transition-smooth);
}

.card-link:hover::after {
  transform: translateX(6px);
}

/* Reach section and Lavender background details */
.reach, .disciplines-container {
  background-color: var(--color-lavender);
  box-shadow: inset 0 10px 30px rgba(0, 0, 59, 0.02), inset 0 -10px 30px rgba(0, 0, 59, 0.02);
}

.reach-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4.5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.offices-list {
  list-style: none;
}

.office-item {
  background-color: var(--color-white);
  border: 1px solid rgba(73, 41, 154, 0.08);
  padding: 1.75rem 2.25rem;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 15px rgba(0, 0, 59, 0.01);
  transition: var(--transition-smooth);
}

.office-item:hover {
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-red);
  transform: translateX(5px);
}

/* HQ gets cyan hover instead */
.office-item:first-child:hover {
  border-color: var(--color-cyan-1);
  box-shadow: var(--shadow-glow-cyan);
}

.office-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.35rem;
}

.office-desc {
  color: rgba(0, 0, 59, 0.7);
  font-size: 0.95rem;
}

.markets-label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  font-size: 1.2rem;
}

.markets-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.market-pill {
  background-color: var(--color-white);
  color: var(--color-purple);
  border: 1.5px solid var(--color-purple);
  padding: 0.6rem 1.4rem;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.market-pill:hover {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-red);
  transform: translateY(-2px);
}

/* Interactive SVG World Map */
.world-map-svg {
  width: 100%;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 15px 30px rgba(73, 41, 154, 0.12));
}

.map-point {
  fill: var(--color-purple);
  stroke: var(--color-white);
  stroke-width: 2.5px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.map-point:hover {
  fill: var(--color-red);
  r: 11;
  stroke: var(--color-cyan-1);
}

/* Live red pulse animation on map */
.map-pulse {
  fill: var(--color-red);
  opacity: 0.5;
  animation: pulse 2.2s infinite ease-out;
  pointer-events: none;
}

/* Bangalore HQ gets special cyan pulse */
svg circle.map-pulse:first-of-type {
  fill: var(--color-cyan-1);
}

@keyframes pulse {
  0% { r: 5; opacity: 0.8; }
  100% { r: 28; opacity: 0; }
}

/* Certifications badges grid */
.cert-teaser {
  background-color: var(--color-white);
  text-align: center;
}

.badge-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
  margin: 4rem 0;
  flex-wrap: wrap;
}

.cert-badge {
  background: var(--color-white);
  border: 1.5px solid var(--color-lavender);
  padding: 2.5rem;
  border-radius: 16px;
  width: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition-smooth);
  box-shadow: 0 6px 20px rgba(0, 0, 59, 0.015);
}

.cert-badge:hover {
  transform: translateY(-8px);
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-red);
}

.cert-badge:first-child:hover {
  border-color: var(--color-cyan-1);
  box-shadow: var(--shadow-glow-cyan);
}

.badge-icon-svg {
  width: 80px;
  height: 80px;
  margin-bottom: 1.75rem;
  transition: var(--transition-smooth);
}

.cert-badge:hover .badge-icon-svg {
  stroke: var(--color-red);
  transform: scale(1.08);
}

.cert-badge:first-child:hover .badge-icon-svg {
  stroke: var(--color-cyan-1);
}

/* ISO certification badge logos (same SVGs as the footer) shown in the creds
   section — vector art, so they stay razor-sharp at this larger display size. */
.badge-iso-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  transition: var(--transition-smooth);
}
.about-creds .cert-badge:hover .badge-iso-logo { transform: scale(1.06); }

.badge-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.badge-desc {
  font-size: 0.9rem;
  color: rgba(0, 0, 59, 0.72);
  line-height: 1.5;
}

/* Standards cards grid */
.standards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  max-width: 1200px;
  margin: 0 auto;
}

.standard-card {
  background-color: var(--color-white);
  border: 1.5px solid rgba(73, 41, 154, 0.06);
  padding: 2.5rem 2rem;
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.standard-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-purple);
  box-shadow: var(--shadow-glow-purple);
}

.standard-card:nth-child(even):hover {
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-red);
}

.standard-icon-container {
  width: 52px;
  height: 52px;
  background-color: var(--color-lavender);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-purple);
  margin-bottom: 1.5rem;
  transition: var(--transition-smooth);
}

.standard-card:hover .standard-icon-container {
  background-color: var(--color-purple);
  color: var(--color-cyan-1);
}

.standard-card:nth-child(even):hover .standard-icon-container {
  background-color: var(--color-red);
  color: var(--color-white);
}

.standard-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.6rem;
}

.standard-desc {
  font-size: 0.9rem;
  color: rgba(0, 0, 59, 0.7);
  line-height: 1.55;
}

/* Team Section cards and placeholder grids */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.team-card {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-lavender);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  transition: var(--transition-smooth);
  position: relative;
}

.team-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-purple);
  box-shadow: var(--shadow-glow-purple);
}

.team-card:nth-child(even):hover {
  border-color: var(--color-red);
  box-shadow: var(--shadow-glow-red);
}

.team-avatar-container {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: var(--color-lavender);
  margin: 0 auto 1.75rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-purple);
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.team-card:hover .team-avatar-container {
  background-color: var(--color-purple);
  color: var(--color-cyan-1);
}

.team-card:nth-child(even):hover .team-avatar-container {
  background-color: var(--color-red);
  color: var(--color-white);
}

.team-role {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-purple);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}

.team-card:nth-child(even) .team-role {
  color: var(--color-red);
}

.team-name {
  font-size: 1.35rem;
  color: var(--color-navy);
  margin-bottom: 0.85rem;
  font-weight: 700;
}

.team-focus {
  font-size: 0.9rem;
  color: rgba(0, 0, 59, 0.72);
  margin-bottom: 1.5rem;
  min-height: 45px;
  line-height: 1.5;
}

.team-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-purple);
  font-size: 0.9rem;
  font-weight: 700;
}

.team-social:hover {
  color: var(--color-red);
}

.placeholder-note-box {
  background-color: rgba(204, 0, 59, 0.03);
  border: 1px dashed var(--color-red);
  padding: 1.75rem;
  border-radius: 12px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3.5rem auto;
  color: var(--color-red);
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(204, 0, 59, 0.05);
}

/* Partner and Client logo stripes (Vibrant Hover Carousel) */
.partners, .clients {
  text-align: center;
}

.logo-carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 3.5rem;
  padding: 1.25rem 0;
}

.logo-carousel-container::before, .logo-carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel-container::before {
  left: 0;
  background: linear-gradient(to right, var(--color-white) 0%, transparent 100%);
}

.logo-carousel-container::after {
  right: 0;
  background: linear-gradient(to left, var(--color-white) 0%, transparent 100%);
}

.clients .logo-carousel-container::before {
  background: linear-gradient(to right, var(--color-lavender) 0%, transparent 100%);
}

.clients .logo-carousel-container::after {
  background: linear-gradient(to left, var(--color-lavender) 0%, transparent 100%);
}

.logo-track {
  display: flex;
  gap: 5rem;
  width: max-content;
  animation: logoScroll 25s linear infinite;
}

.logo-track:hover {
  animation-play-state: paused;
}

@keyframes logoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 15px;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: var(--transition-smooth);
}

/* Vibrant colored state on hover matching new palettes */
.logo-item:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.08);
}

.logo-svg-text {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.5px;
  transition: var(--transition-smooth);
}

.logo-item:hover .logo-svg-text {
  color: var(--color-red);
}

.logo-item:nth-child(even):hover .logo-svg-text {
  color: var(--color-cyan-1);
}

/* Final CTA Section */
.final-cta {
  background: radial-gradient(circle at 50% 50%, #150f55 0%, var(--color-navy) 100%);
  color: var(--color-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-cta-content {
  max-width: 800px;
  z-index: 10;
}

.final-cta h2 {
  color: var(--color-white);
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 5vw, 3rem);
}

.final-cta p {
  color: var(--color-lavender);
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 3rem;
  line-height: 1.7;
}

.final-cta-buttons {
  display: flex;
  gap: 1.75rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.final-cta-link {
  color: var(--color-cyan-1);
  font-weight: 700;
  border-bottom: 2px solid var(--color-cyan-1);
  padding-bottom: 3px;
  font-size: 1.05rem;
}

.final-cta-link:hover {
  color: var(--color-red);
  border-color: var(--color-red);
  transform: translateY(-2px);
}

.contact-info {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin-top: 2rem;
  color: var(--color-lavender);
  font-size: 1.05rem;
  flex-wrap: wrap;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.contact-icon {
  color: var(--color-cyan-1);
  width: 20px;
  height: 20px;
  transition: var(--transition-smooth);
}

.contact-item:hover .contact-icon {
  color: var(--color-red);
  transform: rotate(10deg);
}

/* Footer layout */
.footer {
  background-color: #00001f;
  color: var(--color-lavender);
  padding: 100px 8% 50px 8%;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 5rem;
  max-width: 1200px;
  margin: 0 auto 4rem auto;
}

.footer-brand h3 {
  color: var(--color-white);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.footer-desc {
  font-size: 1rem;
  color: rgba(232, 232, 252, 0.65);
  max-width: 450px;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.footer-links-title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
}

.footer-links {
  list-style: none;
}

.footer-link-item {
  margin-bottom: 0.85rem;
}

.footer-link {
  font-size: 0.98rem;
  color: rgba(232, 232, 252, 0.65);
}

.footer-link:hover {
  color: var(--color-cyan-1);
  padding-left: 6px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: rgba(232, 232, 252, 0.45);
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* Dynamic Entrance Animations */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Strategic Toggle button & Drawer */
.strategy-toggle-btn {
  position: fixed;
  bottom: 35px;
  right: 35px;
  background-color: var(--color-navy);
  color: var(--color-cyan-1);
  border: 2px solid var(--color-cyan-1);
  border-radius: 30px;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-smooth);
}

.strategy-toggle-btn:hover {
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-purple) 100%);
  color: var(--color-white);
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-red);
}

.strategy-drawer {
  position: fixed;
  top: 0;
  right: -550px;
  width: 500px;
  max-width: 90vw;
  height: 100vh;
  background-color: #00001f;
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.65);
  z-index: 2100;
  transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.strategy-drawer.open {
  right: 0;
}

.strategy-header {
  padding: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.strategy-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-cyan-1);
}

.strategy-close-btn {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.75rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.strategy-close-btn:hover {
  color: var(--color-red);
  transform: rotate(90deg);
}

.strategy-tabs {
  display: flex;
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.strategy-tab {
  flex: 1;
  padding: 1.1rem 0.5rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  transition: var(--transition-smooth);
}

.strategy-tab.active {
  color: var(--color-cyan-1);
  border-color: var(--color-cyan-1);
  background-color: rgba(0, 204, 204, 0.05);
}

.strategy-tab:hover {
  color: var(--color-red);
}

.strategy-content {
  flex-grow: 1;
  padding: 2.25rem;
  overflow-y: auto;
}

.strategy-pane {
  display: none;
}

.strategy-pane.active {
  display: block;
}

.strategy-pane h4 {
  font-family: var(--font-heading);
  color: var(--color-cyan-1);
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0.35rem;
}

.strategy-pane h4:first-of-type {
  margin-top: 0;
}

.strategy-pane p, .strategy-pane ul {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(232, 232, 252, 0.85);
  margin-bottom: 1.25rem;
}

.strategy-pane ul {
  padding-left: 1.5rem;
}

.strategy-pane li {
  margin-bottom: 0.6rem;
}

.strategy-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  z-index: 2050;
  transition: var(--transition-smooth);
}

.strategy-drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Responsiveness settings */
@media (max-width: 992px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .standards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 2rem;
  }
  .nav-menu {
    position: fixed;
    left: -100%;
    top: var(--header-height);
    flex-direction: column;
    background-color: var(--color-navy);
    width: 100%;
    text-align: center;
    padding: 3rem 0;
    transition: 0.3s;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
    gap: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-menu.active {
    left: 0;
  }
  .hamburger {
    display: block;
  }
  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
  .stat-item:nth-child(2n)::after {
    display: none;
  }
  
  .reach-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .badge-row {
    gap: 2rem;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 576px) {
  .stat-strip {
    grid-template-columns: 1fr;
  }
  .stat-item::after {
    display: none !important;
  }
  .cards-grid, .standards-grid {
    grid-template-columns: 1fr;
  }
  .hero-cta {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }
  .btn-primary, .btn-ghost {
    width: 100%;
  }
}

/* Visually-hidden helper for screen-reader-only status announcements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==============================================================
   SIGNAL DOSSIER — Editorial-Depth Redesign (Branding Guide V1)
   Appended overrides + new components. Reuses the existing ramp
   tokens (--navy-1..10 etc.) and every JS-hook class. Property-
   level overrides win by source order; only properties without
   an existing mobile media-rule are overridden here.
   ============================================================== */

:root {
  /* NOTE: there is deliberately no --accent-bar token. Decorative gradient
     accent bars (card-top wipes, the hero's vertical rule, heading kickers,
     stat underlines) were removed site-wide on 2026-07-15 and must not be
     reintroduced anywhere. Flow rails, the scroll-progress indicator and the
     header hairline are functional and are NOT accent bars. */
  --hairline-light: rgba(0, 0, 59, 0.08);
  --hairline-cyan: rgba(0, 204, 204, 0.30);
  --deep-field: linear-gradient(165deg, #05052E 0%, var(--color-navy) 52%, #16123F 100%);

  /* ---- ONE hero type scale for every interior page ------------------------
     Before this, three different sizes were in play at 1440px: 54px on
     about/platform/services/contact/blog, 42px on the two-column animated
     pages (industries + services sub-pages), and 34px on vulnerability.core —
     with the lede split 21px / 18px. Every one of those rules now resolves to
     the tokens below, so the heading and lede are the same size on all of them
     and there is a single place to change it.

     The homepage is deliberately NOT included: it is the flagship landing hero
     and keeps its own larger display scale in css/style.css (--fs-h1).

     Sizes are in rem against the shared html{font-size:88%} root, so 1rem =
     14.08px, not 16px. The old values sat at 54.2px and 42.2px; one standard of
     ~50px splits them without shrinking the main pages much. ---- */
  --fs-hero-h1: clamp(2.15rem, 1.52vw + 2rem, 3.6rem);      /* ~50px desktop, ~34px phone */
  --lh-hero-h1: 1.1;
  --fs-hero-lede: clamp(1.08rem, .42vw + 1rem, 1.4rem);     /* ~19.7px desktop */
}

/* ---- Typography scale (Segoe UI / Verdana, Bold 700 max per brand guide) ---- */
h1 { font-size: clamp(3rem, 3.4vw + 2rem, 6rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; }
/* ---- Uniform hero heading across every interior page (the home page keeps its
   own larger display scale, defined in style.css; home <body> has no page-* class
   so it is never matched here). Platform, Services, Industries and blog posts
   set the same tokens in their own stylesheets, since those rules load later
   and would otherwise win at equal specificity. ---- */
.page-about .hero h1,
.page-industry .hero h1,
.page-services .hero h1,
.page-contact .hero h1,
.page-blog .hero h1 {
  font-size: var(--fs-hero-h1);
  line-height: var(--lh-hero-h1);
}
/* The hero lede is one size everywhere too. Scoped to the hero so the global
   p.sub-headline scale used by section intros further down the page is left
   alone. */
.hero .sub-headline,
.post-hero .sub-headline { font-size: var(--fs-hero-lede); }
h2 { font-size: clamp(2rem, 1.2vw + 1.6rem, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); font-weight: 600; }
p { font-size: 1.0625rem; line-height: 1.7; }
p.sub-headline { font-weight: 400; line-height: 1.55; font-size: clamp(1.15rem, 1vw + 1rem, 1.5rem); }
.prose-container p { text-align: start; font-size: 1.0938rem; line-height: 1.75; }
.vision-text { font-weight: 400; }
.final-cta p { font-weight: 400; }

/* ---- Section rhythm: match the home page's uniform section spacing
   (style.css .section: clamp(54px, 5.2vw, 96px)) so every section follows the
   same reduced, consistent top/bottom gap across the site. ---- */
section { padding-block: clamp(54px, 5.2vw, 96px); }

/* Heading accent bar removed site-wide (no "neon" gradient underline under
   any h2). Hidden globally here so it never renders on any page/section. */
h2::after { display: none !important; content: none !important; }

/* ---- Eyebrow kicker labels ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-purple);
  margin-bottom: 1rem;
}
/* Dark-section eyebrows read cyan (safe contrast on navy) */
.hero .eyebrow, .vision .eyebrow, .final-cta .eyebrow { color: var(--cyan-1); }

/* ---- Hero: left-aligned magazine cover on the deep field ---- */
.hero {
  align-items: flex-start;
  text-align: left;
  min-height: 92vh;
  padding: calc(var(--header-height) + 72px) 8% 96px;
  background:
    radial-gradient(60% 55% at 84% 14%, rgba(73, 41, 154, 0.38), transparent 70%),
    radial-gradient(46% 55% at 12% 88%, rgba(0, 204, 204, 0.16), transparent 65%),
    var(--deep-field);
}
.hero-content {
  align-items: flex-start;
  max-width: 64ch;
  position: relative;
}
/* No decorative gradient accent bar beside the hero content — see the
   "no accent bars" note at the top of the accent-bar section. */
.hero h1 { animation: headline-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* Recolour + slow the ambient dot grid */
.hero::before {
  background-image:
    radial-gradient(rgba(0, 204, 204, 0.08) 1.5px, transparent 1.5px),
    radial-gradient(rgba(204, 0, 59, 0.08) 1.5px, transparent 1.5px);
  opacity: 0.5;
  animation: bgScroll 120s linear infinite;
}
/* Repurpose the old glow blob into one large translucent brand shard */
.hero::after {
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: 58%;
  height: 100%;
  clip-path: polygon(0 55%, 42% 20%, 60% 100%, 0 100%);
  background: linear-gradient(135deg, rgba(0, 204, 204, 0.14), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(2px);
}
/* Additive decorative shard cluster + ghosted founding-year numeral */
.hero-shards { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-shards i {
  position: absolute;
  display: block;
  mix-blend-mode: screen;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  will-change: transform;
}
.hero-shards i:nth-child(1) { width: 420px; height: 420px; top: -70px; right: 6%; background: rgba(73, 41, 154, 0.22); animation: shard-drift 24s ease-in-out infinite; }
.hero-shards i:nth-child(2) { width: 300px; height: 300px; top: 30%; right: 24%; background: rgba(0, 204, 204, 0.12); animation: shard-drift 28s ease-in-out infinite reverse; }
.hero-shards i:nth-child(3) { width: 180px; height: 180px; bottom: 9%; right: 42%; background: rgba(204, 0, 59, 0.12); animation: shard-drift 22s ease-in-out infinite; }
.hero-figure {
  position: absolute;
  right: 4%;
  bottom: -4%;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(9rem, 18vw, 20rem);
  line-height: 1;
  color: rgba(130, 130, 159, 0.07);
  pointer-events: none;
  user-select: none;
}
/* Breadcrumb -> editorial eyebrow */
.breadcrumb { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 700; }

/* ---- Stat credibility band: gradient + cyan hairlines ---- */
.stats {
  background: linear-gradient(120deg, #2E1A6B 0%, var(--color-purple) 55%, #3A1F82 100%);
  box-shadow: inset 0 1px 0 var(--hairline-cyan), inset 0 -1px 0 rgba(0, 204, 204, 0.2);
}
.stat-num { font-variant-numeric: tabular-nums lining-nums; }

/* ---- Vision: Glass Panel ---- */
.vision-card {
  background: linear-gradient(160deg, rgba(73, 41, 154, 0.22), rgba(0, 0, 59, 0.35));
  border: 1px solid rgba(0, 204, 204, 0.18);
  border-left: 5px solid var(--color-red);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px rgba(0, 0, 0, 0.35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vision-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}

/* ---- Pillar cards: thin-ruled editorial tiles + wipe rule ---- */
.card { border: 1px solid var(--navy-9); border-radius: 8px; }
.card:hover { box-shadow: 0 20px 45px rgba(73, 41, 154, 0.14); }
.card-num { color: var(--purple-9); }

/* ---- Reach: hairline editorial office rows ---- */
.office-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-light);
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem 0.25rem;
}
.office-item:hover {
  transform: translateX(6px);
  box-shadow: inset 3px 0 0 var(--color-red);
  border-bottom-color: rgba(204, 0, 59, 0.28);
}
.office-item:first-child:hover {
  box-shadow: inset 3px 0 0 var(--color-cyan-1);
  border-bottom-color: var(--hairline-cyan);
}

/* ---- Footer + final CTA depth ---- */
.footer { border-top: 1px solid var(--hairline-cyan); }
.final-cta { position: relative; overflow: hidden; }
.final-cta::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 72%;
  clip-path: polygon(0 28%, 62% 0, 0 100%);
  background: linear-gradient(135deg, rgba(204, 0, 59, 0.16), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* ---- Motion keyframes (transform/opacity only) ---- */
@keyframes shard-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-12px, 10px) rotate(3deg); }
}
@keyframes headline-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ---- Responsive: shards + hero calm down on small screens ---- */
@media (max-width: 768px) {
  .hero-shards i:nth-child(2), .hero-shards i:nth-child(3) { display: none; }
  .hero-shards i:nth-child(1) { width: 260px; height: 260px; }
  .hero-figure { font-size: clamp(6rem, 26vw, 10rem); right: 2%; bottom: -2%; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vision-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  }
}
@media (max-width: 576px) {
  .hero { min-height: auto; }
}

/* ---- Reduced motion: fully calm, legible, everything in final state ---- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-shards i, .hero h1 { animation: none !important; }
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fade-up h2::after { transform: scaleX(1); transition: none; }
}

/* ==============================================================
   HOMEPAGE — sections on the Signal Dossier system
   ============================================================== */

/* Real logo (wordmark) in header + footer. max-height + max-width
   keep aspect ratio and prevent overflow of the wide 15:1 mark. */
.logo-img { display: block; width: auto; height: auto; max-height: 28px; max-width: 62vw; }
.footer-logo { display: block; width: auto; height: auto; max-height: 30px; max-width: 240px; margin-bottom: 1.5rem; }

.lead { font-size: 1.15rem; color: rgba(0, 0, 59, 0.8); max-width: 640px; margin: 1.25rem auto 0; line-height: 1.6; }

/* Section 1 — Hero: regulation pills */
.reg-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0 0 2.25rem; }
.reg-pills li {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-white); background: rgba(73, 41, 154, 0.5);
  border: 1px solid rgba(0, 204, 204, 0.28); padding: 0.4rem 0.9rem; border-radius: 20px;
}

/* Section 2 — Trust bar */
.trust { background-color: var(--color-white); text-align: center; padding-block: clamp(48px, 6vw, 84px); }
.trust-label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-purple); margin-bottom: 2.5rem; }
.trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.1rem 2.6rem; list-style: none; padding: 0; max-width: 1080px; margin: 0 auto; }
.trust-logos li { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--navy-6); opacity: 0.7; transition: var(--transition-smooth); }
.trust-logos li:hover { color: var(--color-navy); opacity: 1; }

/* Section 3 — Regulatory urgency (dark) */
.urgency { background: var(--deep-field); color: var(--color-white); position: relative; overflow: hidden; }
.urgency .eyebrow, .platform .eyebrow, .platform-intro .eyebrow { color: var(--cyan-1); }
.urgency h2, .platform h2, .platform-intro h2 { color: var(--color-white); }
.reg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.reg-card {
  background: linear-gradient(160deg, rgba(73, 41, 154, 0.22), rgba(0, 0, 59, 0.30));
  border: 1px solid rgba(0, 204, 204, 0.14); border-left: 3px solid var(--color-purple);
  border-radius: 10px; padding: 2rem 1.75rem; transition: var(--transition-smooth); display: flex; flex-direction: column;
}
.reg-card:hover { border-left-color: var(--cyan-1); transform: translateY(-4px); box-shadow: var(--shadow-glow-purple); }
.reg-icon { width: 38px; height: 38px; color: var(--cyan-1); margin-bottom: 1rem; }
.reg-card h3 { color: var(--color-white); font-size: 1.2rem; margin-bottom: 0.75rem; }
.reg-card p { color: var(--color-lavender); font-size: 0.98rem; flex-grow: 1; }
.reg-card .card-link { margin-top: 1.25rem; color: var(--cyan-1); }
.reg-card .card-link:hover { color: var(--color-white); }
.fine { color: var(--red-4); font-weight: 700; }
.badge-strip-wrap { max-width: 1000px; margin: 3rem auto 0; text-align: center; }
.badge-strip-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(232, 232, 252, 0.6); margin-bottom: 1rem; }
.badge-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; list-style: none; padding: 0; }
.badge-strip li { font-size: 0.82rem; font-weight: 600; color: var(--color-white); background: rgba(73, 41, 154, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.35rem 0.85rem; border-radius: 20px; }

/* Section 4 — What we secure (lavender) */
.secure { background-color: var(--color-lavender); }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; max-width: 1120px; margin: 0 auto; list-style: none; padding: 0; }
.asset-grid li { display: flex; align-items: center; gap: 0.65rem; background: var(--color-white); border: 1px solid rgba(73, 41, 154, 0.1); border-radius: 10px; padding: 0.9rem 1.1rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-navy); transition: var(--transition-smooth); }
.asset-grid li:hover { transform: translateY(-3px); border-color: var(--color-purple); box-shadow: 0 8px 24px rgba(73, 41, 154, 0.12); }
.asset-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan-1), var(--color-purple)); flex-shrink: 0; }
.secure-closing { max-width: 760px; margin: 2.75rem auto 0; text-align: center; color: rgba(0, 0, 59, 0.8); font-size: 1.05rem; }

/* Section 5 — Audience personas (white) */
.audience { background-color: var(--color-white); }
.persona-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: 1200px; margin: 0 auto; }
.persona-card { background: var(--color-white); border: 1px solid var(--navy-9); border-radius: 12px; padding: 2.25rem 2rem; display: flex; flex-direction: column; transition: var(--transition-smooth); }
.persona-card:hover { transform: translateY(-6px); border-color: var(--color-purple); box-shadow: 0 18px 40px rgba(73, 41, 154, 0.13); }
.persona-icon { width: 40px; height: 40px; color: var(--color-purple); margin-bottom: 1.1rem; }
.persona-card:nth-child(3n) .persona-icon { color: var(--color-red); }
.persona-card h3 { color: var(--color-navy); font-size: 1.25rem; margin-bottom: 0.75rem; }
.persona-card p { color: rgba(0, 0, 59, 0.75); font-size: 0.98rem; flex-grow: 1; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.pills li { font-size: 0.78rem; font-weight: 600; color: var(--color-purple); background: var(--color-lavender); border: 1px solid rgba(73, 41, 154, 0.3); padding: 0.3rem 0.7rem; border-radius: 16px; }

/* Section 6 — Services tiles (lavender) */
.services-home { background-color: var(--color-lavender); }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1150px; margin: 0 auto; list-style: none; padding: 0; }
.service-tile { background: var(--color-white); border: 1px solid rgba(73, 41, 154, 0.08); border-radius: 12px; padding: 2rem 1.75rem; transition: var(--transition-smooth); }
.service-tile:hover { background: var(--color-navy); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 59, 0.18); }
.tile-icon { width: 36px; height: 36px; color: var(--color-purple); margin-bottom: 1rem; transition: var(--transition-smooth); }
.service-tile h3 { color: var(--color-navy); font-size: 1.12rem; margin-bottom: 0.6rem; }
.service-tile p { color: rgba(0, 0, 59, 0.72); font-size: 0.95rem; }
.service-tile:hover h3, .service-tile:hover p { color: var(--color-white); }
.service-tile:hover .tile-icon { color: var(--cyan-1); }
.section-links { display: flex; gap: 2rem; justify-content: center; margin-top: 2.75rem; flex-wrap: wrap; }

/* Section 7 — Platform (dark, 2-col) */
.platform { background: var(--deep-field); color: var(--color-white); position: relative; overflow: hidden; }
.platform-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; max-width: 1200px; margin: 0 auto; align-items: center; }
.platform-intro .lead { color: var(--color-lavender); margin: 1.25rem 0 2rem; max-width: none; }
.engines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.engine { background: linear-gradient(160deg, rgba(73, 41, 154, 0.2), rgba(0, 0, 59, 0.3)); border: 1px solid rgba(0, 204, 204, 0.14); border-left: 3px solid var(--color-purple); border-radius: 10px; padding: 1.35rem 1.5rem; transition: var(--transition-smooth); }
.engine:hover { border-left-color: var(--cyan-1); transform: translateX(4px); }
.engine-head { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.engine-head code { font-family: var(--font-body); color: var(--cyan-1); font-size: 1.05rem; font-weight: 700; }
.engine-head span { color: var(--color-white); font-weight: 600; font-size: 0.92rem; }
.engine p { color: var(--color-lavender); font-size: 0.92rem; margin: 0; }

/* Section 8 — Why CyMobility (white checklist) */
.why-home { background-color: var(--color-white); }
.checklist { list-style: none; padding: 0; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.checklist li { display: flex; gap: 1rem; align-items: flex-start; }
.tick { width: 28px; height: 28px; color: var(--cyan-1); flex-shrink: 0; margin-top: 1px; background: rgba(0, 204, 204, 0.12); border-radius: 7px; padding: 4px; }
.checklist strong { display: block; color: var(--color-navy); font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 0.25rem; }
.checklist span { color: rgba(0, 0, 59, 0.75); font-size: 0.98rem; line-height: 1.6; }
.why-footer { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 3rem; }
.iso-badges { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.iso-badge { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--color-navy); background: var(--color-lavender); border: 1.5px solid var(--color-purple); border-radius: 8px; padding: 0.6rem 1.1rem; }

/* Section 9 — Credibility strip: word-stats fit + keep crimson off it */
.stats-home .stat-num { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
.stats-home .stat-item:nth-child(2) .stat-num { color: var(--cyan-1); text-shadow: 0 0 10px rgba(0, 204, 204, 0.2); }

/* ---- Review fixes that also affect the homepage ---- */
/* Hero H1 must not clip long words on narrow phones */
.hero h1 { overflow-wrap: break-word; }
@media (max-width: 420px) {
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.06; }
  .hero-content { padding-left: 20px; }
}
/* Vision heading kicker: apply the two-tone bar (was defeated by .vision h2::after specificity) */
.vision h2::after { background: linear-gradient(90deg, var(--cyan-1) 0 40px, var(--purple-4) 40px); }

/* ---- Homepage responsive ---- */
@media (max-width: 992px) {
  .reg-cards, .persona-cards, .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
  .reg-cards, .persona-cards, .tile-grid { grid-template-columns: 1fr; }
  .stats-home .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
/* Team credibility strip: 3 columns on desktop; collapses via the base .stat-strip mobile rules */
@media (min-width: 769px) {
  .stat-strip--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
}

/* ==============================================================
   PREMIUM SAAS ELEVATION — depth, glass, rhythm & motion
   Purely visual polish. No text color and no font-size of any
   existing element is changed; every effect reuses the brand
   palette only. Rules win by source order. No grid-template-
   columns or other mobile-overridden property is touched.
   ============================================================== */

:root {
  --radius-card: 14px;
  --elev-soft: 0 1px 2px rgba(0, 0, 59, 0.05), 0 10px 28px rgba(0, 0, 59, 0.06);
  --elev-lift: 0 12px 22px rgba(0, 0, 59, 0.08), 0 26px 52px rgba(73, 41, 154, 0.16);
  --glass-line: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Anchor targets clear the fixed header; tasteful selection accent */
html { scroll-padding-top: calc(var(--header-height) + 16px); }
::selection { background: rgba(0, 204, 204, 0.22); }
::-moz-selection { background: rgba(0, 204, 204, 0.22); }

/* Keyboard focus ring (accessibility + premium feel) */
a:focus-visible, button:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid transparent; /* stays visible in forced-colors / high-contrast mode */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cyan-1), 0 0 0 5px rgba(0, 0, 59, 0.5);
  border-radius: 4px;
}

/* ---- Depth on otherwise-flat light sections (background color preserved) ---- */
.trust {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(73, 41, 154, 0.05), transparent 60%),
    var(--color-white);
}
.audience, .why-home {
  background:
    radial-gradient(90% 60% at 88% 0%, rgba(0, 204, 204, 0.04), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(73, 41, 154, 0.05), transparent 55%),
    var(--color-white);
}
.secure, .services-home {
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(73, 41, 154, 0.06), transparent 55%),
    var(--color-lavender);
}

/* ---- Dark sections: faint dot texture + soft top seam = smooth hand-off ---- */
.urgency::before, .platform::before, .testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(0, 204, 204, 0.05) 1.5px, transparent 1.5px),
    radial-gradient(rgba(73, 41, 154, 0.10) 1.5px, transparent 1.5px);
  background-size: 46px 46px;
  background-position: 0 0, 23px 23px;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
}
.urgency::after, .platform::after, .testimonials::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 240px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0, 204, 204, 0.08), transparent 70%);
}
.urgency > *, .platform > *, .testimonials > * { position: relative; z-index: 1; }

/* ---- Glassmorphism on translucent dark cards + chips ---- */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .reg-card, .engine, .badge-strip li, .reg-pills li, .testimonial-card, .stats .stat-item {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.reg-card { border-radius: var(--radius-card); box-shadow: var(--glass-line), 0 16px 40px rgba(0, 0, 30, 0.28); }
.reg-card:hover { box-shadow: var(--glass-line), 0 22px 52px rgba(73, 41, 154, 0.32); }
.engine { border-radius: 12px; box-shadow: var(--glass-line); }

/* ---- Soft neumorphic depth on light cards (rest + hover) ---- */
.persona-card, .service-tile { border-radius: var(--radius-card); box-shadow: var(--elev-soft); position: relative; overflow: hidden; }
.persona-card:hover { box-shadow: var(--elev-lift); }
.service-tile:hover { box-shadow: 0 22px 44px rgba(0, 0, 59, 0.22); }
.asset-grid li { box-shadow: 0 1px 2px rgba(0, 0, 59, 0.05); }
.asset-grid li:hover { box-shadow: 0 12px 28px rgba(73, 41, 154, 0.15); }
.iso-badge { border-radius: 10px; }

/* ---- Statistics: premium glass metric cards on the purple band ---- */
.stats .stat-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.25rem;
  box-shadow: var(--glass-line);
  transition: var(--transition-smooth);
}
.stats .stat-item:hover { transform: translateY(-4px); border-color: var(--hairline-cyan); background: rgba(255, 255, 255, 0.09); }
.stats .stat-item::after { display: none; }
/* The gradient bar that used to sit under each stat number is gone — no
   decorative accent bars anywhere on the site. */
.stats .stat-item .stat-num::after { display: none; content: none; }

/* ---- Final CTA: central spotlight for a premium banner ---- */
.final-cta::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  max-width: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 204, 204, 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.final-cta-content { position: relative; z-index: 1; }

/* ==============================================================
   TESTIMONIALS — social proof (dark glass grid)
   NOTE: quotes below are PLACEHOLDERS. Replace with real, approved
   client statements before publishing.
   ============================================================== */
.testimonials { background: var(--deep-field); color: var(--color-white); position: relative; overflow: hidden; }
.testimonials .eyebrow { color: var(--cyan-1); }
.testimonials h2 { color: var(--color-white); }
.testimonials .lead { color: var(--color-lavender); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.testimonial-card {
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(73, 41, 154, 0.22), rgba(0, 0, 59, 0.32));
  border: 1px solid rgba(0, 204, 204, 0.16);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem 2rem;
  box-shadow: var(--glass-line), 0 18px 44px rgba(0, 0, 30, 0.30);
  transition: var(--transition-smooth);
}
.testimonial-card:hover { transform: translateY(-6px); border-color: var(--hairline-cyan); box-shadow: var(--glass-line), 0 26px 56px rgba(73, 41, 154, 0.30); }
.quote-mark { font-family: var(--font-heading); font-size: 3.4rem; line-height: 0.5; color: var(--cyan-1); opacity: 0.35; margin-bottom: 0.75rem; }
.testimonial-quote { color: var(--color-lavender); font-size: 1.02rem; line-height: 1.7; font-style: italic; flex-grow: 1; margin-bottom: 1.75rem; }
.testimonial-author { display: flex; align-items: center; gap: 0.9rem; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan-1), var(--color-purple));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; color: var(--color-navy); font-size: 1.05rem;
}
.testimonial-name { display: block; font-family: var(--font-heading); font-weight: 600; color: var(--color-white); font-size: 0.98rem; }
.testimonial-role { display: block; color: rgba(232, 232, 252, 0.7); font-size: 0.85rem; }

/* ---- Responsive for new components ---- */
@media (max-width: 992px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ==============================================================
   PERFORMANCE — smooth scrolling without losing the look
   backdrop-filter re-blurs the backdrop every frame, so many of
   them tank scroll FPS. We keep the frosted-glass APPEARANCE via
   the existing translucent gradients + borders, but drop the
   expensive per-frame blur on high-count/repeating elements and
   the continuous background-position repaint. Look ~unchanged;
   scrolling is smooth.
   ============================================================== */

/* Drop backdrop blur on repeating cards & chips (kept: navbar, vision-card) */
.reg-card, .engine, .badge-strip li, .reg-pills li, .stats .stat-item, .testimonial-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Lighter blur on the one element that blurs on every scroll frame */
.navbar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Stop the hero dot-grid from repainting continuously (shards still drift) */
.hero::before { animation: none; }

/* Remove the blurred, screen-blended shard layer that repaints on scroll */
.hero::after { filter: none; mix-blend-mode: normal; }

/* Promote the few transform-only animations to their own GPU layer */
.hero-shards i { will-change: transform; }

/* ==============================================================
   SITE-WIDE CARD ELEVATION & MICRO-INTERACTIONS
   Brings the homepage's premium depth to every page (About / Team
   / Certifications) for a consistent SaaS feel. Adds only soft
   resting shadows, unified radii, subtle section depth, an avatar
   ring, and an animated button shine. No text color or font-size
   is changed; each card's richer :hover shadow still wins (higher
   specificity), so existing hover behaviour is preserved exactly.
   ============================================================== */

/* Unified soft resting elevation — cards float like premium components */
.card, .standard-card, .cert-badge, .team-card { box-shadow: var(--elev-soft); }
.card, .standard-card { border-radius: 14px; }

/* Subtle depth behind the card grids on otherwise-flat light sections */
.pillars, .caps, .cert-teaser {
  background:
    radial-gradient(80% 60% at 88% 0%, rgba(0, 204, 204, 0.04), transparent 55%),
    radial-gradient(75% 60% at 0% 100%, rgba(73, 41, 154, 0.05), transparent 55%),
    var(--color-white);
}

/* Premium team avatar: defined ring + soft depth (hover recolour preserved) */
.team-avatar-container {
  box-shadow: 0 0 0 1px rgba(73, 41, 154, 0.12), 0 10px 24px rgba(73, 41, 154, 0.14);
}

/* Animated button shine — a light sweep on hover (hover-only, no idle cost) */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::after { left: 140%; }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }

/* ==============================================================
   THEME TOGGLE — Light / Dark
   Default (no attribute or data-theme="dark") = the original design,
   untouched. data-theme="light" flips ONLY the dark surfaces
   (navbar, hero, urgency/platform/testimonials, vision, final-CTA,
   footer) to light; the already-light sections are unchanged.
   The toggle button is injected into the navbar by main.js.
   ============================================================== */

/* Keep the logo left so the injected toggle groups on the right */
.logo { margin-right: auto; }

/* Toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 1.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-lavender);
  cursor: pointer;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--color-cyan-1); border-color: var(--hairline-cyan); transform: translateY(-2px); }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle { background: rgba(0, 0, 59, 0.04); border-color: rgba(0, 0, 59, 0.12); color: var(--color-navy); }
[data-theme="light"] .theme-toggle:hover { color: var(--color-purple); border-color: rgba(73, 41, 154, 0.3); }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (max-width: 768px) {
  .theme-toggle { margin-left: auto; margin-right: 0.9rem; }
}

/* Smooth cross-fade only while toggling (added/removed by JS) */
.theme-transition, .theme-transition *, .theme-transition *::before, .theme-transition *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease,
              transform 0.35s ease, opacity 0.35s ease !important;
}

/* ---- LIGHT THEME OVERRIDES ---- */
:root[data-theme="light"] {
  --deep-field: linear-gradient(170deg, #F7F7FD 0%, #FFFFFF 55%, #F1F1FB 100%);
  --hairline-cyan: rgba(73, 41, 154, 0.18);
}

/* Navbar */
[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.8); border-bottom-color: rgba(0, 0, 59, 0.08); }
[data-theme="light"] .navbar-scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 40px rgba(0, 0, 59, 0.1); border-bottom-color: rgba(0, 0, 59, 0.08); }
[data-theme="light"] .nav-link { color: var(--color-navy); }
[data-theme="light"] .nav-link.active { color: var(--color-purple); }
[data-theme="light"] .hamburger-line { background-color: var(--color-navy); }
[data-theme="light"] .nav-menu { background-color: #ffffff; border-bottom-color: rgba(0, 0, 59, 0.08); }

/* Hero */
[data-theme="light"] .hero {
  background:
    radial-gradient(60% 55% at 84% 14%, rgba(73, 41, 154, 0.09), transparent 70%),
    radial-gradient(46% 55% at 12% 88%, rgba(0, 204, 204, 0.09), transparent 65%),
    linear-gradient(170deg, #F6F6FD 0%, #FFFFFF 58%, #EFEFFB 100%);
}
[data-theme="light"] .hero h1 { color: var(--color-navy); }
[data-theme="light"] .hero h1 span.highlight-teal {
  background: linear-gradient(135deg, var(--color-purple) 20%, var(--color-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero .sub-headline { color: rgba(0, 0, 59, 0.8); }
[data-theme="light"] .hero .eyebrow { color: var(--color-purple); }
[data-theme="light"] .reg-pills li { background: var(--color-lavender); border-color: rgba(73, 41, 154, 0.25); color: var(--color-purple); }

/* Breadcrumb sits in the (now light) inner-page hero */
[data-theme="light"] .breadcrumb { color: rgba(0, 0, 59, 0.7); }
[data-theme="light"] .breadcrumb li::after { color: rgba(0, 0, 59, 0.35); }
[data-theme="light"] .breadcrumb-active { color: var(--color-purple); }
[data-theme="light"] .breadcrumb a:hover { color: var(--color-purple); }

/* Shared dark-content sections → light text */
[data-theme="light"] .urgency, [data-theme="light"] .platform, [data-theme="light"] .testimonials { color: var(--color-navy); }
[data-theme="light"] .urgency h2, [data-theme="light"] .platform h2, [data-theme="light"] .platform-intro h2, [data-theme="light"] .testimonials h2 { color: var(--color-navy); }
[data-theme="light"] .urgency .eyebrow, [data-theme="light"] .platform .eyebrow, [data-theme="light"] .platform-intro .eyebrow, [data-theme="light"] .testimonials .eyebrow { color: var(--color-purple); }

/* Regulatory cards (light) */
[data-theme="light"] .reg-card { background: #ffffff; border-color: rgba(73, 41, 154, 0.12); border-left-color: var(--color-purple); box-shadow: var(--elev-soft); }
[data-theme="light"] .reg-card h3 { color: var(--color-navy); }
[data-theme="light"] .reg-card p { color: rgba(0, 0, 59, 0.75); }
[data-theme="light"] .reg-card .card-link { color: var(--color-purple); }
[data-theme="light"] .reg-card .card-link:hover { color: var(--color-red); }
[data-theme="light"] .reg-icon { color: var(--color-purple); }
[data-theme="light"] .fine { color: var(--color-red); }
[data-theme="light"] .badge-strip li { background: var(--color-lavender); border-color: rgba(73, 41, 154, 0.2); color: var(--color-purple); }
[data-theme="light"] .badge-strip-label { color: rgba(0, 0, 59, 0.6); }

/* Platform engines (light) */
[data-theme="light"] .engine { background: #ffffff; border-color: rgba(73, 41, 154, 0.12); border-left-color: var(--color-purple); box-shadow: var(--elev-soft); }
[data-theme="light"] .engine-head code { color: var(--color-purple); }
[data-theme="light"] .engine-head span { color: var(--color-navy); }
[data-theme="light"] .engine p { color: rgba(0, 0, 59, 0.75); }
[data-theme="light"] .platform-intro .lead { color: rgba(0, 0, 59, 0.8); }

/* Testimonials (light) */
[data-theme="light"] .testimonials .lead { color: rgba(0, 0, 59, 0.8); }
[data-theme="light"] .testimonial-card { background: #ffffff; border-color: rgba(73, 41, 154, 0.12); box-shadow: var(--elev-soft); }
[data-theme="light"] .testimonial-quote { color: rgba(0, 0, 59, 0.8); }
[data-theme="light"] .testimonial-name { color: var(--color-navy); }
[data-theme="light"] .testimonial-role { color: rgba(0, 0, 59, 0.6); }
[data-theme="light"] .quote-mark { color: var(--color-purple); }

/* Vision block (About, light) */
[data-theme="light"] .vision { background: radial-gradient(circle at 20% 80%, #F0F0FB 0%, #FFFFFF 100%); color: var(--color-navy); }
[data-theme="light"] .vision h2 { color: var(--color-navy); }
[data-theme="light"] .vision .eyebrow { color: var(--color-purple); }
[data-theme="light"] .vision-card { background: #ffffff; border-color: rgba(73, 41, 154, 0.14); border-left-color: var(--color-red); box-shadow: var(--elev-soft); }
[data-theme="light"] .vision-text { color: var(--color-navy); }
[data-theme="light"] .vision-footer { color: var(--color-purple); }
[data-theme="light"] .vision-card::before { color: var(--color-purple); }

/* Final CTA (light) */
[data-theme="light"] .final-cta { background: radial-gradient(circle at 50% 50%, #F4F4FD 0%, #FFFFFF 72%); color: var(--color-navy); }
[data-theme="light"] .final-cta h2 { color: var(--color-navy); }
[data-theme="light"] .final-cta p { color: rgba(0, 0, 59, 0.8); }
[data-theme="light"] .final-cta .eyebrow { color: var(--color-purple); }
[data-theme="light"] .final-cta-link { color: var(--color-purple); border-bottom-color: var(--color-purple); }
[data-theme="light"] .final-cta-link:hover { color: var(--color-red); border-bottom-color: var(--color-red); }
[data-theme="light"] .contact-item { color: var(--color-navy); }
[data-theme="light"] .final-cta::after { opacity: 0.4; }

/* Footer (light) */
[data-theme="light"] .footer { background-color: var(--color-lavender); border-top-color: rgba(73, 41, 154, 0.18); }
[data-theme="light"] .footer-desc { color: rgba(0, 0, 59, 0.75); }
[data-theme="light"] .footer-links-title { color: var(--color-navy); }
[data-theme="light"] .footer-link { color: rgba(0, 0, 59, 0.75); }
[data-theme="light"] .footer-link:hover { color: var(--color-purple); }
[data-theme="light"] .footer-bottom { color: rgba(0, 0, 59, 0.7); border-top-color: rgba(0, 0, 59, 0.1); }
/* Copyright line uses an inline light color — override it on light theme */
[data-theme="light"] .footer-brand p[style] { color: rgba(0, 0, 59, 0.55) !important; }

/* ==============================================================
   FLOATING UI — scroll progress bar + back-to-top (injected by JS)
   Fixed, GPU-cheap (transform/opacity only), theme-aware.
   ============================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1100;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--cyan-1), var(--color-purple) 55%, var(--color-red));
  will-change: transform;
}

.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 59, 0.6);
  color: var(--color-lavender);
  border: 1px solid rgba(0, 204, 204, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { color: var(--color-cyan-1); border-color: var(--hairline-cyan); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 204, 204, 0.25); }
[data-theme="light"] .back-to-top { background: rgba(255, 255, 255, 0.85); color: var(--color-navy); border-color: rgba(73, 41, 154, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 59, 0.15); }
[data-theme="light"] .back-to-top:hover { color: var(--color-purple); border-color: rgba(73, 41, 154, 0.35); box-shadow: 0 14px 34px rgba(73, 41, 154, 0.2); }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease, visibility 0.2s; }
}

/* ==============================================================
   STAGGERED CARD REVEAL — cards cascade in as their section shows.
   Opacity-only (animated by each card's own `transition: all`), so
   it never fights the hover transform. The per-card delay is set +
   cleared by JS. Grids live inside .fade-up sections (already hidden
   without JS), so this adds no new no-JS risk.
   ============================================================== */
.fade-up .reg-cards > *, .fade-up .persona-cards > *, .fade-up .tile-grid > *,
.fade-up .cards-grid > *, .fade-up .standards-grid > *, .fade-up .team-grid > *,
.fade-up .testimonial-grid > * { opacity: 0; }
.fade-up.visible .reg-cards > *, .fade-up.visible .persona-cards > *, .fade-up.visible .tile-grid > *,
.fade-up.visible .cards-grid > *, .fade-up.visible .standards-grid > *, .fade-up.visible .team-grid > *,
.fade-up.visible .testimonial-grid > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fade-up .reg-cards > *, .fade-up .persona-cards > *, .fade-up .tile-grid > *,
  .fade-up .cards-grid > *, .fade-up .standards-grid > *, .fade-up .team-grid > *,
  .fade-up .testimonial-grid > * { opacity: 1 !important; }
}

/* ==============================================================
   THEME REVIEW FIXES — light-mode contrast + toggle reachability
   ============================================================== */

/* Hero ghost CTA was invisible (cyan on the now-white hero) */
[data-theme="light"] .btn-ghost { color: var(--color-purple); border-color: var(--color-purple); }
[data-theme="light"] .btn-ghost:hover { color: var(--color-white); background-color: var(--color-purple); border-color: var(--color-purple); }

/* Footer brand name (About/Team/Cert footers use a text <h3>) was white on lavender */
[data-theme="light"] .footer-brand h3 { color: var(--color-navy); }

/* Nav underline began cyan on the white light navbar */
[data-theme="light"] .nav-link::after { background: linear-gradient(90deg, var(--color-purple), var(--color-red)); }

/* Theme-aware logo: two stacked marks toggled by CSS = correct from first paint,
   no JS swap and no flash. The light-coloured mark shows on the dark UI, the
   dark-coloured mark on the light UI. */
.logo-mark-light { display: none; }
[data-theme="light"] .logo-mark-dark { display: none; }
[data-theme="light"] .logo-mark-light { display: block; }

/* Nav sizing: the wordmark is 15:1 (~422px @28px tall). Trim it a touch and
   tighten the link gap so the row (logo + 7 links + toggle) fits, then collapse
   to the hamburger at <=1200px so the toggle can never be clipped off-screen. */
.logo-img { max-height: 24px; }
.nav-menu { gap: 1.4rem; }
@media (max-width: 1200px) {
  .navbar { padding: 0 2rem; }
  .nav-menu {
    position: fixed; left: -100%; top: var(--header-height);
    flex-direction: column; background-color: var(--color-navy);
    width: 100%; text-align: center; padding: 3rem 0; transition: left 0.3s ease;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35); gap: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  [data-theme="light"] .nav-menu { background-color: #ffffff; border-bottom-color: rgba(0, 0, 59, 0.08); }
  .nav-menu.active { left: 0; }
  .hamburger { display: block; }
  .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
  .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .theme-toggle { margin-left: auto; margin-right: 0.9rem; }
}

/* ==============================================================
   ABOUT PAGE — remove card "boxes" for a cleaner floating layout
   (scoped so the homepage and other pages are unaffected)
   ============================================================== */

/* 1. Credibility stat strip (About & Team): numbers float, NO boxes,
      and "15+ Years" / "4 Phases" stay on a single line */
.stats:not(.stats-home) .stat-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 10px !important;
}
.stats:not(.stats-home) .stat-item::after { display: none !important; }
.stats:not(.stats-home) .stat-item:hover {
  background: transparent !important;
  border-color: transparent !important;
  transform: translateY(-3px);
}
.stats:not(.stats-home) .stat-num { font-size: clamp(1.55rem, 3.1vw, 2.35rem); white-space: nowrap; margin-bottom: 0.2rem !important; }
/* Drop the accent line under the number here; keep the label tight to it */
.stats:not(.stats-home) .stat-num::after { display: none !important; }

/* 2. Vision: remove the ENTIRE outline box — floating text only */
.vision-card {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
.vision-card::before { display: none !important; }

/* 3. "What Makes CyMobility Different" pillars: subtle frosted-glass cards.
      They blend into the white section (translucent tint + soft blur), carry
      only a whisper of a border and gentle layered depth, and lift a little
      more on hover. Calm, lightweight, premium. */
.pillars .card {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.72), rgba(243, 243, 251, 0.55)) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(73, 41, 154, 0.06) !important;
  border-radius: 18px !important;
  padding: 2.2rem 2rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 59, 0.03), 0 12px 30px rgba(0, 0, 59, 0.05) !important;
  overflow: hidden !important;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out),
              box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out) !important;
}
.pillars .card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 59, 0.05), 0 24px 50px rgba(73, 41, 154, 0.14) !important;
  border-color: rgba(73, 41, 154, 0.12) !important;
}

/* 4. Certifications ghost button was cyan-on-white (invisible) — make it readable */
.cert-teaser .btn-ghost { color: var(--color-purple) !important; border-color: var(--color-purple) !important; }
.cert-teaser .btn-ghost:hover { color: var(--color-white) !important; background: linear-gradient(135deg, var(--color-red), var(--color-purple)) !important; border-color: var(--color-red) !important; }

/* ==============================================================
   ABOUT PAGE — credentials tidy-up + theme-toggle polish
   ============================================================== */

/* Credentials heading: drop the small decorative underline bar */
.about-creds h2::after { display: none !important; }

/* ISO 9001 / ISO 27001 badges: remove the background boxes → floating.
   Size each to the badge (not the old fixed 310px) so the two sit together,
   centred, instead of drifting far apart. */
.about-creds .cert-badge {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  padding: 0.5rem 1rem !important;
}
.about-creds .cert-badge:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; }

/* .badge-row carries `margin: 4rem 0`, which made sense while the
   "See our certifications & partnerships" button followed it and needed
   clearing. With that button gone the bottom half of that margin has nothing
   to space against, so it simply stacked on the section's own 96px bottom
   padding: 160px of empty white under the marks against 96px above the
   heading. Dropping it leaves the section's padding to do the job, top and
   bottom equal. Only the margin goes - the section keeps its own padding, so
   the band below is untouched. */
.about-creds .badge-row { margin-bottom: 0; }

/* Dark/light theme toggle — small interaction upgrade (icon eases on hover) */
.theme-toggle svg { transition: transform 0.45s var(--ease-out); }
.theme-toggle:hover svg { transform: rotate(20deg) scale(1.05); }

/* Remove the small decorative underline below this About-page heading */
.who h2::after { display: none !important; }

/* Remove the decorative accent lines — both the upper (::before) and lower
   (::after) cyan→purple bars — from these three headings: Our Vision,
   What Makes CyMobility Different, Where We Are. */
.vision h2::after,
.pillars h2::after,
.reach h2::after,
.vision h2::before,
.pillars h2::before,
.reach h2::before {
  display: none !important;
}

/* Map: subtle pin depth */
.map-point { filter: drop-shadow(0 1px 4px rgba(0, 0, 59, 0.35)); }

/* "What Makes CyMobility Different": let the heading size to its content so it
   sits on one centred line — then the top-left accent lands above "What"
   instead of to the left of the wrapped, centred two-line version. */
.pillars .grid-header { max-width: none; }

/* Larger section/subsection headings (the ones readers scan most) */
h2 { font-size: clamp(2.3rem, 1.6vw + 1.8rem, 3.9rem); }
h3 { font-size: clamp(1.45rem, 1.1vw + 1.1rem, 1.85rem); }

/* ==============================================================
   ABOUT PAGE — de-red: swap every red hover / click / accent for
   the site's purple↔cyan gradient palette so nothing pops red.
   ============================================================== */

/* Stat strip: the "20+" number was solid red → cyan. */
.stats:not(.stats-home) .stat-item:nth-child(2) .stat-num {
  color: var(--cyan-1);
  text-shadow: 0 0 10px rgba(0, 204, 204, 0.22);
}

/* Pillars: card number no longer flashes red on hover — use purple. */
.pillars .card:nth-child(2n):hover .card-num { color: var(--color-purple) !important; }

/* Office cards ("Where We Are"): red left-bar / underline on hover
   → cyan, matching the HQ item (calm, on-brand). */
.office-item:hover {
  box-shadow: inset 3px 0 0 var(--color-purple) !important;
  border-bottom-color: rgba(73, 41, 154, 0.30) !important;
}
.office-item:first-child:hover {
  box-shadow: inset 3px 0 0 var(--color-cyan-1) !important;
  border-bottom-color: var(--hairline-cyan) !important;
}

/* Map: keep the twinkle, drop the red — Austin/Stuttgart pulse purple,
   Bangalore HQ stays cyan; hovering a pin no longer turns red. */
.map-pulse { fill: var(--color-purple); }
svg circle.map-pulse:first-of-type { fill: var(--color-cyan-1); }
.map-point:hover { fill: var(--color-purple); stroke: var(--color-cyan-1); }

/* Certifications button: red hover gradient → deep navy→purple. */
.cert-teaser .btn-ghost:hover {
  background: linear-gradient(135deg, var(--color-navy), var(--color-purple)) !important;
  border-color: var(--color-purple) !important;
}

/* Nav underline (all pages): was cyan→red / purple→red → cyan→purple. */
.nav-link::after { background: linear-gradient(90deg, var(--color-cyan-1), var(--color-purple)); }
[data-theme="light"] .nav-link::after { background: linear-gradient(90deg, var(--color-purple), var(--cyan-1)); }

/* "Meet the team" text link + its underline: red hover → cyan (dark) / purple (light). */
.final-cta-link:hover { color: var(--cyan-1); border-color: var(--cyan-1); }
[data-theme="light"] .final-cta-link:hover { color: var(--color-purple); border-color: var(--color-purple); border-bottom-color: var(--color-purple); }

/* "Explore services" links under the pillars: red hover → navy. */
.pillars .card-link:hover { color: var(--color-navy); }

/* Country pills (India, USA, Germany, Japan, France, UK): red hover
   fill/glow → purple. */
.market-pill:hover {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  box-shadow: 0 8px 20px rgba(73, 41, 154, 0.28);
}

/* Certification badge icons (e.g. ISO 27001:2022): red hover stroke →
   purple; ISO 9001 (first badge) keeps its cyan. */
.about-creds .cert-badge:hover .badge-icon-svg { stroke: var(--color-cyan-1); }
.about-creds .cert-badge:first-child:hover .badge-icon-svg { stroke: var(--color-cyan-1); }

/* (Removed: an About-only primary-CTA fork. It made About match the homepage
   while Contact and the Industries pages kept a different blue hover. The base
   .btn-primary rule now carries the canonical purple→navy flush for every
   page — never fork the button hover per page again.) */

/* About hero: remove the small cyan accent bar to the left of the heading
   and drop the indent it left behind so the H1 sits flush left. */
.page-about .hero-content { padding-left: 0; }

/* "Who We Are" prose: emphasis words → brand purple (#49299A) instead of red. */
.who .prose-container strong { color: var(--color-purple); }

/* Pillar index numbers (01–06): all share the same purple (#49299A) as "02",
   at rest and on hover — no cyan/red divergence. */
.pillars .card-num { color: var(--color-purple); }
.pillars .card:hover .card-num,
.pillars .card:nth-child(2n):hover .card-num { color: var(--color-purple) !important; }

/* "Built for Automotive Security…" heading: a more engaging, expanded
   presentation — slightly larger, and it grows in (scale + letter-spacing)
   as the section scrolls into view. */
.who h2 {
  font-size: clamp(2.5rem, 1.9vw + 2rem, 4.1rem);
  line-height: 1.12;
  transition: transform 0.9s var(--ease-out), letter-spacing 0.9s var(--ease-out);
  will-change: transform;
}
.who.fade-up h2 {
  transform: scale(0.9);
  letter-spacing: -0.8px;
}
.who.fade-up.visible h2 {
  transform: scale(1);
  letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
  .who.fade-up h2,
  .who.fade-up.visible h2 { transform: none; letter-spacing: 0; transition: none; }
}

/* Vision section: attractive cybersecurity backdrop (NO grid) — soft cyan /
   purple glows, a few floating nodes, and a security shield + keyhole motif,
   all low-opacity so the dark text stays crisp. */
/* This band's shield IS the About page's mark - there is no .band-emblem in the
   markup, only a comment where one was tried and removed for overlapping. So it
   has to match the rest of the set, and it did not:

   SIZE. It was a fixed `auto 300px` while every band emblem is
   clamp(150px, gutter + 50px, 430px) - 400px at 1920. Same expression now, so it
   grows and shrinks with the gutter exactly like the others.

   WEIGHT. Strokes were 4 and 6 against the set's 1.4 and 1.8. At the old 300px
   that rendered about twice as heavy as any other mark on the site.

   POSITION. `right -30px center` is a THREE-value background-position, which is
   invalid - the valid forms are two or four values. Chromium dropped it, which
   is why the shield was appearing hard left instead of on the right. Rather than
   move it back, it now uses the four-value form to sit exactly where a
   .band-emblem--left sits, since that is where it has actually been rendering
   and where the rest of the set's left-hand marks live.

   The second, smaller shield layer is gone. At 400px the primary now occupies
   the space the echo used to sit in, and two shields in one band is the exact
   thing the comment in about/index.html warns against. */
.page-about .vision {
  background-color: #191259;
  background-image:
    radial-gradient(circle at 84% 14%, rgba(0, 204, 204, 0.16), transparent 42%),
    radial-gradient(circle at 7% 90%, rgba(73, 41, 154, 0.34), transparent 46%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='300' viewBox='0 0 260 300'><path d='M130 14 L228 52 V138 C228 214 186 262 130 288 C74 262 32 214 32 138 V52 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'/><circle cx='130' cy='126' r='24' fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8'/><path d='M130 150 v34' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round'/></svg>"),
    linear-gradient(160deg, #241C74 0%, #191259 55%, #140F4C 100%);
  background-repeat: no-repeat;
  background-position: 0 0, 0 0, left clamp(4px, 0.9vw, 18px) top clamp(26px, 4vh, 64px), 0 0;
  background-size: auto, auto, auto clamp(150px, calc((100vw - 1220px) / 2 + 50px), 430px), cover;
  color: #E9E6F6;
}
/* Dropped on the same breakpoint as .band-emblem, and moved with it from 1440 to
   1200 - the derivation is at .band-motes. */
@media (max-width: 1199px) {
  .page-about .vision {
    background-image:
      radial-gradient(circle at 84% 14%, rgba(0, 204, 204, 0.16), transparent 42%),
      radial-gradient(circle at 7% 90%, rgba(73, 41, 154, 0.34), transparent 46%),
      linear-gradient(160deg, #241C74 0%, #191259 55%, #140F4C 100%);
    background-position: 0 0, 0 0, 0 0;
    background-size: auto, auto, cover;
  }
}
.page-about .vision h2 { color: #ffffff; }
.page-about .vision-text { color: #E9E6F6; }
.page-about .vision-footer { color: #9DB4F5; }

/* ============ Vision / mission / rationale =============================
   Three heading-and-content pairs. They were three different KINDS of object
   before — a centred display h2, an inline bold prefix inside a paragraph, and
   an uppercase label — so they neither read as a set nor lined up with each
   other. Every heading now takes the same label treatment, and only the content
   changes weight: the vision statement is the payload of the section, the other
   two explain it.

   One box holds all three, so every heading and every line of copy starts on
   the same vertical rule, and the rule itself stays centred in the band. The
   measure is absolute, not `ch` — ch resolves against each element's own
   font-size, so it would give the 56px statement and the 15px rationale wildly
   different widths. */
/* Sits higher in the band than it did. The 144px above the heading was the
   section's own top padding plus this block's 40px top margin stacked on it,
   which pushed "Our Vision" toward the middle of the band rather than reading
   as its opening. The margin is gone and the band's top padding is trimmed on
   this page only, leaving about 85px - high, but still clear of the edge.
   Bottom padding is untouched, so the band keeps its footing. */
.page-about .vision { padding-top: clamp(48px, 4.4vw, 84px); }
.page-about .vision-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.page-about .vision-block + .vision-block { margin-top: clamp(30px, 3.4vw, 50px); }

.page-about .vision-inner h2,
.page-about .vision-inner h3 {
  margin: 0 0 0.7rem;
  color: #9DB4F5;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
/* Vision and mission carry the section, so they take a heading size; the
   rationale's label stays small because it introduces supporting copy rather
   than a claim. Tracking eases off as the size goes up — 0.1em is right on a
   0.92rem label and reads gappy at 1.35rem. */
/* "Our Vision" is the section's heading, so it is sized to read as one rather
   than as an eyebrow over the statement. Still clearly subordinate to the
   statement beneath it - that is the payload and stays at display size; this
   just has to announce the section.

   Tracking eases off again as the size goes up, continuing the rule noted
   above: 0.1em suits a 0.92rem label, 0.055em suited 1.35rem, and at 2rem even
   that reads gappy. */
.page-about .vision-inner h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  letter-spacing: 0.038em;
  margin-bottom: 1.15rem;
}
.page-about .vision-inner h3 {
  font-size: 0.92rem;
  letter-spacing: 0.1em;
}

/* The whole statement at display size, under an "Our Vision" label and centred.
   It carries the section, so it is set at one size throughout rather than the
   earlier two-size split, and centring is what marks it as the claim rather
   than the first paragraph of body copy.

   Only this block centres. The "Why This Matters" block under it stays left,
   because it is a six-line paragraph and centred prose that long forces the eye
   to hunt for the start of every line. */
.page-about .vision-block--lead { text-align: center; }
.page-about .vision-statement {
  margin: 0 auto;
  color: #ffffff;
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  /* No measure of its own: it takes the full .vision-inner width, so it wraps
     on the same edges as the "Why This Matters" paragraph below and the two
     blocks read as one column. A 22ch cap was squeezing it into a narrow
     six-line stack that lined up with nothing on the page.
     text-wrap: balance then evens the line lengths across the four lines
     instead of leaving a short orphan on the last one. */
  max-width: none;
  text-wrap: balance;
}
.page-about .vision-block p:not(.vision-statement) {
  margin: 0;
  color: #E9E6F6;
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.78;
}

/* Final CTA restyled as a contained CARD — mirrors the home page CTA panel:
   a rounded, bordered blue->purple gradient panel with a slow conic-glow sheen,
   inset from the section edges, sitting on the dark navy band. Colours use the
   shared site-chrome variables so the card adapts to light/dark like home. */
.page-about .final-cta {
  position: relative;
  overflow: hidden;
  background: #00003b;
  padding: clamp(70px, 8vw, 120px) 0;
  border-radius: 28px;
  margin: clamp(20px, 3vw, 44px) clamp(12px, 2vw, 32px);
}
[data-theme="light"] .page-about .final-cta { background: #EEF0FB; }

/* drop the legacy decorative overlays (red triangle + cyan blob) */
.page-about .final-cta::before,
.page-about .final-cta::after { display: none !important; }

/* the card layer: gradient fill, glowing border, animated conic sheen */
.page-about .final-cta .final-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(77, 127, 230, 0.16), rgba(90, 63, 176, 0.2));
  border: 1px solid var(--line-hi);
  border-radius: 28px;
  overflow: hidden;
}
.page-about .final-cta .final-bg::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(77, 127, 230, 0.18), transparent 40%, rgba(90, 63, 176, 0.16), transparent 75%);
  animation: spin 16s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .page-about .final-cta .final-bg::before { animation: none; }
}

/* centered content column, above the card */
.page-about .final-cta-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.page-about .final-cta h2 { color: var(--heading); font-size: clamp(2.3rem, 5.4vw, 3.4rem); }
.page-about .final-cta h2 em.accent { font-style: italic; color: #00dddd; font-weight: 700; }
.page-about .final-cta p { color: var(--txt); font-size: 1.32rem; }

/* secondary action rendered as an underlined link (like the photo's PDF link) */
.page-about .final-cta-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 0;
  padding-bottom: 0;
}
.page-about .final-cta-link:hover { color: var(--accent-2); border-color: transparent; transform: none; }

/* centered contact row with accent icons */
.page-about .contact-info { gap: 12px 26px; margin-top: 14px; }
.page-about .contact-item { color: var(--txt); }
.page-about .contact-icon { color: var(--accent); }

/* Stat strip blends straight into the hero above it instead of forming a bright
   purple band. Same dark navy as the hero's base colour (#00003B), and the cyan
   inset hairlines / bright top border are dropped so the hero → stats seam reads
   as one continuous dark field. About only; home keeps its purple stat strip. */
.page-about .stats {
  background: var(--color-navy);
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

/* About footer = home footer. After the shared footer redesign (single light
   logo + social/cert-badge row), the one remaining gap is the social icon size:
   the shared chrome renders them at 15px while home uses 18px — match home.
   (Light-mode "blend" removal lives in site-chrome.css so the footer stays the
   same dark navy home uses in every theme.) */
.page-about .footer-social a svg { width: 18px; height: 18px; }

/* Footer bottom bar: cym's legacy `.footer-bottom` rule caps it at 1200px and
   centres it, which pulls the copyright + legal links inward, out of line with
   the full-width footer columns above. Neutralize that so the bottom bar spans
   the same `.container` width — copyright hard left, legal links hard right —
   matching the home page. `.footer-bottom-inner` (space-between) does the rest. */
.page-about .footer-bottom {
  max-width: none;
  margin: 0;
  padding-top: 0;
  display: block;
}

/* Print: keep colours/backgrounds, reveal scroll-in content, hide floating UI. */
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .fade-up, .fade-up * { opacity: 1 !important; transform: none !important; }
  .scroll-progress, .back-to-top, .theme-toggle { display: none !important; }
}

/* ============ Section emblems (js-free, background-only) ==============
   Faint outline artwork sitting behind the copy in one dark band per page,
   the same idea as the shield already on the About page. Reviewed as a set
   before it landed here; see the emblem review page for the full catalogue.

   WEIGHT. Strokes are 1.4 for the white silhouette and 1.8 for the single
   cyan accent, chosen to match the animated hero graphics (js/hero-net.js
   and friends), which draw at lineWidth 1 with 1.4-1.8 for emphasis. If
   those change, these should change with them or the page stops agreeing
   with itself.

   LAYERING. z-index -1 inside a section that this rule also makes
   `position: relative; isolation: isolate`. That paints the emblem above the
   band gradient and below every piece of copy, without any content element
   needing a z-index of its own - the same arrangement the hero canvases use.

   SIDES. Pages alternate: where one page carries its emblem on the right,
   the next carries it on the left, so moving through the site does not feel
   like the same ornament stamped in the same corner every time.

   Below 1150px the emblem is dropped entirely rather than shrunk: there is
   no side margin left to sit in once the copy goes full width.
   ===================================================================== */
:root {
  --emblem-shield-scan: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='300' viewBox='0 0 260 300'><path d='M130 14 L228 52 V138 C228 214 186 262 130 288 C74 262 32 214 32 138 V52 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'/><circle cx='120' cy='124' r='32' fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8'/><path d='M143 147 L176 180' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round'/></svg>");
  --emblem-shield-key: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='300' viewBox='0 0 260 300'><path d='M130 14 L228 52 V138 C228 214 186 262 130 288 C74 262 32 214 32 138 V52 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'/><circle cx='130' cy='126' r='24' fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8'/><path d='M130 150 v34' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round'/></svg>");
  --emblem-chip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><rect x='62' y='62' width='136' height='136' rx='12' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'/><g stroke='%23FFFFFF' stroke-opacity='0.115' stroke-width='1.4' stroke-linecap='round'><path d='M96 62 V34'/><path d='M130 62 V34'/><path d='M164 62 V34'/><path d='M96 198 V226'/><path d='M130 198 V226'/><path d='M164 198 V226'/><path d='M62 96 H34'/><path d='M62 130 H34'/><path d='M62 164 H34'/><path d='M198 96 H226'/><path d='M198 130 H226'/><path d='M198 164 H226'/></g><rect x='100' y='100' width='60' height='60' rx='7' fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8'/></svg>");
  --emblem-radar: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'><circle cx='130' cy='130' r='112'/><circle cx='130' cy='130' r='76'/><circle cx='130' cy='130' r='40'/></g><path d='M130 130 L209 51' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round'/><path d='M209 51 A112 112 0 0 0 130 18' fill='none' stroke='%2300CCCC' stroke-opacity='0.19' stroke-width='1.8'/><circle cx='182' cy='92' r='8' fill='%2300CCCC' fill-opacity='0.28'/></svg>");
  --emblem-seal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='280' viewBox='0 0 260 280'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'><circle cx='130' cy='112' r='76'/><circle cx='130' cy='112' r='58'/><path d='M100 182 V264 L130 240 L160 264 V182'/></g><path d='M102 110 L124 132 L162 88' fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --emblem-doc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='300' viewBox='0 0 260 300'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'><path d='M64 24 H162 L204 66 V276 H64 Z'/><path d='M162 24 V66 H204'/></g><g stroke='%23FFFFFF' stroke-opacity='0.11' stroke-width='1.4' stroke-linecap='round'><path d='M92 118 H176'/><path d='M92 150 H176'/><path d='M92 182 H140'/></g><path d='M96 226 L116 246 L154 202' fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --emblem-bus: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4' stroke-linecap='round'><path d='M22 100 H278'/><path d='M22 82 V118'/><path d='M278 82 V118'/></g><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.115' stroke-width='1.4'><path d='M76 100 V60'/><circle cx='76' cy='44' r='15'/><path d='M138 100 V140'/><circle cx='138' cy='156' r='15'/><path d='M252 100 V140'/><circle cx='252' cy='156' r='15'/></g><g fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8'><path d='M200 100 V60'/><circle cx='200' cy='44' r='15'/></g></svg>");
  --emblem-bug: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'><ellipse cx='130' cy='142' rx='44' ry='58'/><circle cx='130' cy='72' r='22'/></g><g stroke='%23FFFFFF' stroke-opacity='0.115' stroke-width='1.4' stroke-linecap='round'><path d='M116 56 L98 30'/><path d='M144 56 L162 30'/><path d='M87 110 L44 86'/><path d='M86 142 L40 142'/><path d='M87 174 L44 198'/><path d='M173 110 L216 86'/><path d='M174 142 L220 142'/><path d='M173 174 L216 198'/></g><g stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round'><path d='M104 124 H156'/><path d='M99 148 H161'/><path d='M106 172 H154'/></g></svg>");
  --emblem-ota: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='300' viewBox='0 0 260 300'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'><path d='M88 148 V116 A42 42 0 0 1 172 116 V148'/><rect x='58' y='148' width='144' height='120' rx='14'/><circle cx='130' cy='192' r='15'/></g><path d='M130 207 V236' stroke='%23FFFFFF' stroke-opacity='0.115' stroke-width='1.4' stroke-linecap='round'/><g fill='none' stroke='%2300CCCC' stroke-opacity='0.28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M130 6 V62'/><path d='M104 36 L130 62 L156 36'/></g></svg>");
  --emblem-hex: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><path d='M130 34 L212 82 L212 178 L130 226 L48 178 L48 82 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'/><path d='M130 88 L170 111 L170 149 L130 172 L90 149 L90 111 Z' fill='none' stroke='%2300CCCC' stroke-opacity='0.25' stroke-width='1.8'/><circle cx='130' cy='130' r='7' fill='%2300CCCC' fill-opacity='0.28'/></svg>");
  --emblem-wave: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'><g stroke='%23FFFFFF' stroke-opacity='0.11' stroke-width='1.4' stroke-linecap='round'><path d='M16 90 H304'/><path d='M16 40 V140'/></g><path d='M16 90 V54 H60 V126 H104 V54 H140 V90 H176 V54 H206 V126 H250 V90 H304' fill='none' stroke='%2300CCCC' stroke-opacity='0.25' stroke-width='1.8' stroke-linejoin='round'/></svg>");
  --emblem-vehicle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='1.4'><path d='M22 176 V158 C22 144 32 134 48 131 L86 96 C92 90 100 87 109 87 L184 87 C195 87 204 91 211 99 L238 131 C266 136 298 142 298 158 V176 Z'/><circle cx='80' cy='176' r='22'/><circle cx='232' cy='176' r='22'/></g><g fill='none' stroke='%2300CCCC' stroke-opacity='0.25' stroke-width='1.8'><path d='M116 62 A38 38 0 0 1 178 62'/><path d='M100 40 A60 60 0 0 1 194 40'/></g><circle cx='147' cy='84' r='6' fill='%2300CCCC' fill-opacity='0.28'/></svg>");

  /* ---- Round 2: 24 more marks, so no page repeats another's ------------
     Drawn as companion icons in a 100-unit box, where the house weight is
     stroke-width 2.4. That weight is wrong here. A companion renders at about
     0.6 scale beside an emblem; a band emblem renders at ~390px. Carried over
     unchanged, a 2.4 stroke in a 100-unit box would come out at 9.4px on
     screen against the emblem set's 2.1px — four times too heavy, and loud
     enough to compete with the copy it sits behind.

     So the stroke is 1.4/2.6 = 0.54: the value that makes a 100-unit glyph
     land at exactly the same on-screen width as a 260-unit emblem drawn at
     1.4. The odd-looking number is the point. Intrinsic size stays 260 so the
     stroke is never sub-pixel if a renderer rasterises before scaling.

     White-only, unlike the twelve above, which each carry a cyan accent. That
     is how these were reviewed and approved, and since one page only ever
     shows one mark, the difference reads between pages rather than within
     one. Worth a look before it spreads further. */
  --emblem-car: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round' stroke-linecap='round'><path d='M14 62 V50 q0 -5 5 -6 l13 -3 l10 -13 h24 l8 13 l12 3 q5 1 5 6 v12'/><path d='M38 62 H62'/><circle cx='30' cy='62' r='8'/><circle cx='70' cy='62' r='8'/></g></svg>");
  --emblem-ecu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><rect x='19' y='24' width='62' height='48' rx='5'/><rect x='38' y='40' width='24' height='16' rx='3'/></g><g stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M32 72 V84'/><path d='M44 72 V84'/><path d='M56 72 V84'/><path d='M68 72 V84'/></g></svg>");
  --emblem-canbus: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M10 50 H90'/><path d='M14 40 V60'/><path d='M86 40 V60'/><path d='M34 50 V32'/><path d='M64 50 V68'/></g><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><circle cx='34' cy='25' r='7'/><circle cx='64' cy='75' r='7'/></g></svg>");
  --emblem-road: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M24 88 L40 14'/><path d='M76 88 L60 14'/><path d='M50 84 V70'/><path d='M50 58 V46'/><path d='M50 34 V22'/></g></svg>");
  --emblem-tower: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round' stroke-linejoin='round'><path d='M31 88 L50 20 L69 88'/><path d='M38 64 H62'/><path d='M43 44 H57'/><path d='M24 88 H76'/></g></svg>");
  --emblem-satellite: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><rect x='40' y='34' width='20' height='20' rx='3'/><rect x='10' y='37' width='22' height='14' rx='2'/><rect x='68' y='37' width='22' height='14' rx='2'/><circle cx='68' cy='72' r='9'/></g><g stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M32 44 H40'/><path d='M60 44 H68'/><path d='M56 54 L62 64'/></g></svg>");
  --emblem-sweep: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='50' cy='50' r='32'/><circle cx='50' cy='50' r='15'/><path d='M50 50 L73 27'/><path d='M73 27 A32 32 0 0 0 50 18'/></g><circle cx='65' cy='37' r='3.6' fill='%23FFFFFF' fill-opacity='0.13'/></svg>");
  --emblem-chain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><rect x='12' y='39' width='46' height='22' rx='11'/><rect x='42' y='39' width='46' height='22' rx='11'/></g></svg>");
  --emblem-topology: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='20' r='8'/><circle cx='24' cy='78' r='8'/><circle cx='76' cy='78' r='8'/><path d='M50 28 V46'/><path d='M24 70 V46 H76 V70'/></g></svg>");
  --emblem-uplink: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round' stroke-linejoin='round'><path d='M17 60 V80 H83 V60'/><path d='M50 68 V20'/><path d='M35 35 L50 20 L65 35'/></g></svg>");
  /* Ridges nested tight, with legs long enough to close the silhouette into one
     mass. The first cut used wide gaps and short legs, which read as three
     unrelated arches rather than a print — the shape has to survive at 6%
     opacity, where only the outline registers. */
  --emblem-print: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M16 60 a34 34 0 0 1 68 0 v20'/><path d='M16 60 v20'/><path d='M27 63 a23 23 0 0 1 46 0 v20'/><path d='M27 63 v20'/><path d='M38 66 a12 12 0 0 1 24 0 v20'/><path d='M38 66 v20'/><path d='M47 70 a3 3 0 0 1 6 0 v16'/></g></svg>");
  --emblem-hash: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><rect x='17' y='17' width='66' height='66' rx='11' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'/><g stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M42 31 L36 69'/><path d='M62 31 L56 69'/><path d='M31 43 H68'/><path d='M29 58 H66'/></g></svg>");
  --emblem-binary: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M17 29 H35'/><path d='M44 29 H53'/><path d='M62 29 H83'/><path d='M17 50 H28'/><path d='M37 50 H58'/><path d='M67 50 H83'/><path d='M17 71 H39'/><path d='M48 71 H57'/><path d='M66 71 H83'/></g></svg>");
  --emblem-funnel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><path d='M13 21 H87 L58 53 V82 L42 74 V53 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'/></svg>");
  --emblem-gauge: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M18 68 A32 32 0 1 1 82 68'/><path d='M50 66 L67 41'/><path d='M18 68 H30'/><path d='M70 68 H82'/></g><circle cx='50' cy='66' r='4' fill='%23FFFFFF' fill-opacity='0.13'/></svg>");
  --emblem-store: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><ellipse cx='50' cy='26' rx='28' ry='10'/><path d='M22 26 V70'/><path d='M78 26 V70'/><path d='M22 48 A28 10 0 0 0 78 48'/><path d='M22 70 A28 10 0 0 0 78 70'/></g></svg>");
  --emblem-flag: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round' stroke-linejoin='round'><path d='M28 88 V14'/><path d='M28 18 H74 L64 34 L74 50 H28'/></g></svg>");
  --emblem-badge: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><rect x='17' y='26' width='66' height='54' rx='7'/><path d='M43 26 V15 H57 V26'/><circle cx='37' cy='47' r='8'/></g><g stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M55 43 H72'/><path d='M55 55 H72'/><path d='M26 67 H72'/></g></svg>");
  --emblem-rosette: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><circle cx='50' cy='37' r='23'/><circle cx='50' cy='37' r='13'/><path d='M37 56 V90 L50 79 L63 90 V56'/></g></svg>");
  --emblem-package: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><path d='M50 13 L84 32 V68 L50 87 L16 68 V32 Z'/><path d='M16 32 L50 51 L84 32'/><path d='M50 51 V87'/></g></svg>");
  --emblem-route: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><path d='M22 76 C42 76 44 50 60 44 C70 40 74 34 76 24' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'/><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><circle cx='20' cy='80' r='7'/><circle cx='78' cy='20' r='7'/></g></svg>");
  --emblem-patch: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g transform='rotate(-35 50 50)'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><rect x='14' y='36' width='72' height='28' rx='14'/><path d='M38 36 V64'/><path d='M62 36 V64'/></g><g fill='%23FFFFFF' fill-opacity='0.13'><circle cx='45' cy='44' r='2.6'/><circle cx='55' cy='44' r='2.6'/><circle cx='45' cy='56' r='2.6'/><circle cx='55' cy='56' r='2.6'/></g></g></svg>");
  --emblem-cog: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='50' cy='50' r='23'/><circle cx='50' cy='50' r='9'/><path d='M50 27 V15'/><path d='M50 73 V85'/><path d='M27 50 H15'/><path d='M73 50 H85'/><path d='M34 34 L25 25'/><path d='M66 34 L75 25'/><path d='M34 66 L25 75'/><path d='M66 66 L75 75'/></g></svg>");
  --emblem-scale: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round' stroke-linejoin='round'><path d='M50 84 V26'/><path d='M34 84 H66'/><path d='M20 34 H80'/><path d='M20 34 L11 52 A11 11 0 0 0 29 52 Z'/><path d='M80 34 L71 52 A11 11 0 0 0 89 52 Z'/></g><circle cx='50' cy='23' r='4' fill='%23FFFFFF' fill-opacity='0.13'/></svg>");

  /* ---- Round 3: the closing CTA band ------------------------------------
     .final-cta is dark on every page and was carrying no mark, which is what
     made the set look thin — you scroll past one emblem and then a bare band.
     Twenty more glyphs so the second mark on a page is still unique site-wide,
     rather than reusing the one already above it. Same 0.54 stroke as round 2;
     see the note there for why that number. */
  --emblem-dashboard: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><rect x='12' y='22' width='76' height='56' rx='6'/><path d='M12 36 H88'/><rect x='20' y='44' width='28' height='26' rx='3'/><rect x='54' y='44' width='26' height='11' rx='3'/><rect x='54' y='59' width='26' height='11' rx='3'/></g></svg>");
  --emblem-terminal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round' stroke-linecap='round'><rect x='12' y='22' width='76' height='56' rx='7'/><path d='M12 36 H88'/><path d='M26 50 L34 58 L26 66'/><path d='M42 66 H62'/></g></svg>");
  --emblem-grid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><rect x='16' y='16' width='68' height='68' rx='4'/><path d='M33 16 V84'/><path d='M50 16 V84'/><path d='M67 16 V84'/><path d='M16 33 H84'/><path d='M16 50 H84'/><path d='M16 67 H84'/></g><rect x='50' y='33' width='17' height='17' fill='%23FFFFFF' fill-opacity='0.13'/></svg>");
  --emblem-feed: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><path d='M14 28 H68'/><circle cx='79' cy='28' r='4.5'/><path d='M14 44 H54'/><circle cx='65' cy='44' r='4.5'/><path d='M14 60 H72'/><circle cx='83' cy='60' r='4.5'/><path d='M14 76 H46'/><circle cx='57' cy='76' r='4.5'/></g></svg>");
  --emblem-triage: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='16' cy='30' r='5'/><path d='M27 30 H84'/><circle cx='16' cy='50' r='5'/><path d='M27 50 H66'/><circle cx='16' cy='70' r='5'/><path d='M27 70 H48'/></g></svg>");
  --emblem-compass: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><circle cx='50' cy='50' r='32'/><path d='M66 34 L56 56 L34 66 L44 44 Z'/></g><circle cx='50' cy='50' r='2.6' fill='%23FFFFFF' fill-opacity='0.13'/></svg>");
  --emblem-reticle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='50' cy='50' r='30'/><circle cx='50' cy='50' r='9'/><path d='M50 8 V32'/><path d='M50 68 V92'/><path d='M8 50 H32'/><path d='M68 50 H92'/></g></svg>");
  --emblem-probe: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round' stroke-linecap='round'><rect x='12' y='54' width='60' height='32' rx='4'/><path d='M26 66 H58'/><path d='M26 76 H46'/><path d='M88 12 L54 58'/><circle cx='50' cy='63' r='4.5'/></g></svg>");
  --emblem-mutation: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='18' cy='50' r='7'/><path d='M25 50 H44'/><path d='M44 50 L70 27'/><path d='M44 50 H70'/><path d='M44 50 L70 73'/><circle cx='78' cy='26' r='6'/><circle cx='78' cy='50' r='6'/><circle cx='78' cy='74' r='6'/></g></svg>");
  --emblem-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><path d='M8 50 C24 26 76 26 92 50 C76 74 24 74 8 50 Z'/><circle cx='50' cy='50' r='13'/></g></svg>");
  --emblem-matrix: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><rect x='18' y='18' width='64' height='64' rx='4'/><path d='M39 18 V82'/><path d='M61 18 V82'/><path d='M18 39 H82'/><path d='M18 61 H82'/><path d='M75 25 L25 75'/></g></svg>");
  --emblem-cap: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round' stroke-linecap='round'><path d='M12 40 L50 24 L88 40 L50 56 Z'/><path d='M28 47 V68 C36 76 44 78 50 78 C56 78 64 76 72 68 V47'/><path d='M84 42 V66'/></g></svg>");
  --emblem-layers: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><path d='M50 14 L86 32 L50 50 L14 32 Z'/><path d='M14 50 L50 68 L86 50'/><path d='M14 66 L50 84 L86 66'/></g></svg>");
  --emblem-blueprint: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round' stroke-linecap='round'><rect x='14' y='20' width='72' height='60' rx='4'/><rect x='28' y='32' width='30' height='24' rx='2'/><path d='M66 32 H74'/><path d='M28 68 H70'/><path d='M28 64 V72'/><path d='M70 64 V72'/></g></svg>");
  --emblem-gavel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g transform='rotate(-40 50 50)' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round' stroke-linecap='round'><rect x='28' y='16' width='44' height='18' rx='4'/><path d='M50 34 V72'/><path d='M30 80 H70'/><path d='M30 80 V74 H70 V80'/></g></svg>");
  --emblem-stars: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'><circle cx='80' cy='50' r='3.6'/><circle cx='76' cy='35' r='3.6'/><circle cx='65' cy='24' r='3.6'/><circle cx='50' cy='20' r='3.6'/><circle cx='35' cy='24' r='3.6'/><circle cx='24' cy='35' r='3.6'/><circle cx='20' cy='50' r='3.6'/><circle cx='24' cy='65' r='3.6'/><circle cx='35' cy='76' r='3.6'/><circle cx='50' cy='80' r='3.6'/><circle cx='65' cy='76' r='3.6'/><circle cx='76' cy='65' r='3.6'/></g></svg>");
  --emblem-checklist: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round' stroke-linecap='round'><rect x='18' y='16' width='64' height='68' rx='6'/><path d='M29 33 L33 37 L41 29'/><path d='M50 33 H71'/><path d='M29 51 L33 55 L41 47'/><path d='M50 51 H71'/><path d='M29 69 L33 73 L41 65'/><path d='M50 69 H71'/></g></svg>");
  --emblem-factory: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><path d='M12 84 V46 L38 60 V46 L64 60 V26 H84 V84 Z'/><path d='M8 84 H92'/><path d='M24 70 H30'/><path d='M50 70 H56'/><path d='M72 70 H78'/></g></svg>");
  --emblem-team: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='50' cy='32' r='13'/><path d='M29 76 a21 21 0 0 1 42 0'/><circle cx='19' cy='43' r='9'/><path d='M5 74 a15 15 0 0 1 16 -13'/><circle cx='81' cy='43' r='9'/><path d='M95 74 a15 15 0 0 0 -16 -13'/></g></svg>");
  --emblem-pin: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><path d='M50 88 C50 88 76 60 76 42 A26 26 0 0 0 24 42 C24 60 50 88 50 88 Z'/><circle cx='50' cy='42' r='10'/></g></svg>");
  /* Five nodes stepping down and across - one per step in a "how it runs"
     band. A console said what the tool is; this says what the section is,
     which is the sequence itself. */
  --emblem-steps: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='18' cy='20' r='9'/><path d='M18 29 V41'/><circle cx='18' cy='50' r='9'/><path d='M27 50 H41'/><circle cx='50' cy='50' r='9'/><path d='M50 59 V71'/><circle cx='50' cy='80' r='9'/><path d='M59 80 H73'/><circle cx='82' cy='80' r='9'/></g></svg>");
  /* A fanned set of cards, for a band that IS a portfolio of services. Kept
     distinct from --emblem-dashboard and --emblem-grid, which are both tile
     layouts, by the rotation - at 6% opacity a straight grid of rectangles
     would be indistinguishable from those two. */
  --emblem-portfolio: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linejoin='round'><rect x='20' y='26' width='40' height='52' rx='5' transform='rotate(-12 40 52)'/><rect x='40' y='26' width='40' height='52' rx='5' transform='rotate(12 60 52)'/><rect x='30' y='22' width='40' height='56' rx='5'/></g></svg>");
  /* Held back from round 2 because no page needed them; the CTA band does. */
  --emblem-wheel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'><circle cx='50' cy='50' r='32'/><circle cx='50' cy='50' r='11'/><path d='M50 39 V18'/><path d='M41 57 L24 74'/><path d='M59 57 L76 74'/></g></svg>");
  --emblem-downlink: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round' stroke-linejoin='round'><path d='M17 60 V80 H83 V60'/><path d='M50 20 V68'/><path d='M35 53 L50 68 L65 53'/></g></svg>");
  --emblem-evplug: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 100 100'><circle cx='50' cy='36' r='21' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54'/><g fill='%23FFFFFF' fill-opacity='0.13'><circle cx='41' cy='30' r='3.6'/><circle cx='59' cy='30' r='3.6'/><circle cx='50' cy='44' r='3.6'/></g><path d='M50 57 V74 C50 84 41 87 34 87' fill='none' stroke='%23FFFFFF' stroke-opacity='0.13' stroke-width='0.54' stroke-linecap='round'/></svg>");

  /* ---- Companion icons -------------------------------------------------
     The 35 small glyphs from the reviewed set, used as scattered texture
     around each band emblem rather than as marks in their own right.

     Kept at their native stroke-width 2.4 in a 100-unit box, unlike the
     emblems, which were re-cut to 0.54. That is not an inconsistency: these
     paint at 58-78px while an emblem paints at ~400px, so 2.4 here lands at
     about 1.8px on screen against the emblem's 2.1px - near enough to read as
     one family, slightly lighter because they are the supporting layer.

     Opacity 0.11 rather than the emblems' 0.13, for the same reason.
     ------------------------------------------------------------------- */
  --ic-lock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4'><path d='M31 46 V34 A19 19 0 0 1 69 34 V46'/><rect x='21' y='46' width='58' height='40' rx='8'/></g></svg>");
  --ic-key: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><circle cx='34' cy='38' r='17'/><path d='M46 50 L82 86'/><path d='M66 70 L76 60'/></g></svg>");
  --ic-chip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><rect x='28' y='28' width='44' height='44' rx='6' fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4'/><g stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><path d='M40 28 V15'/><path d='M60 28 V15'/><path d='M40 72 V85'/><path d='M60 72 V85'/><path d='M28 40 H15'/><path d='M28 60 H15'/><path d='M72 40 H85'/><path d='M72 60 H85'/></g></svg>");
  --ic-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='50' r='32'/><path d='M35 51 L46 62 L67 39'/></g></svg>");
  --ic-warn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M50 18 L85 80 H15 Z'/><path d='M50 42 V58'/></g><circle cx='50' cy='69' r='4' fill='%23FFFFFF' fill-opacity='0.30'/></svg>");
  --ic-hex: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M50 16 L79 33 L79 67 L50 84 L21 67 L21 33 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'/></svg>");
  --ic-node: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><circle cx='50' cy='50' r='16'/><path d='M50 34 V12'/><path d='M64 59 L84 71'/><path d='M36 59 L16 71'/></g></svg>");
  --ic-lens: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><circle cx='44' cy='44' r='24'/><path d='M62 62 L86 86'/></g></svg>");
  --ic-wave: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M10 76 V30 H32 V76 H52 V30 H70 V76 H90' fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/></svg>");
  --ic-signal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><path d='M50 86 V52'/><circle cx='50' cy='42' r='8'/><path d='M32 31 A26 26 0 0 1 68 31'/><path d='M22 22 A38 38 0 0 1 78 22'/></g></svg>");
  --ic-bug: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4'><ellipse cx='50' cy='58' rx='18' ry='24'/><circle cx='50' cy='28' r='9'/></g><g stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><path d='M32 46 L15 35'/><path d='M32 70 L15 81'/><path d='M68 46 L85 35'/><path d='M68 70 L85 81'/></g></svg>");
  --ic-term: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='13' y='22' width='74' height='56' rx='8'/><path d='M13 38 H87'/><path d='M29 53 L37 61 L29 69'/><path d='M46 69 H66'/></g></svg>");
  --ic-cross: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><circle cx='50' cy='50' r='26'/><path d='M50 8 V24'/><path d='M50 76 V92'/><path d='M8 50 H24'/><path d='M76 50 H92'/></g><circle cx='50' cy='50' r='4' fill='%23FFFFFF' fill-opacity='0.30'/></svg>");
  --ic-doc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'><path d='M27 13 H62 L77 28 V87 H27 Z'/><path d='M62 13 V28 H77'/></g><g stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><path d='M38 46 H66'/><path d='M38 59 H66'/><path d='M38 72 H55'/></g></svg>");
  --ic-cap: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'><path d='M13 41 L50 24 L87 41 L50 58 Z'/><path d='M28 48 V69 C36 76 44 78 50 78 C56 78 64 76 72 69 V48'/></g></svg>");
  --ic-unlock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4'><path d='M31 46 V33 A19 19 0 0 1 67 27'/><rect x='21' y='46' width='58' height='40' rx='8'/></g></svg>");
  --ic-shield: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M50 15 L81 26 V52 C81 71 67 82 50 88 C33 82 19 71 19 52 V26 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'/></svg>");
  --ic-firewall: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><rect x='16' y='30' width='68' height='44' rx='4' fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'/><g stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><path d='M16 44 H84'/><path d='M16 60 H84'/><path d='M50 30 V44'/><path d='M33 44 V60'/><path d='M67 44 V60'/><path d='M50 60 V74'/></g></svg>");
  --ic-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'><path d='M8 50 C24 28 76 28 92 50 C76 72 24 72 8 50 Z'/><circle cx='50' cy='50' r='13'/></g></svg>");
  --ic-obd: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M18 36 H82 L75 68 H25 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'/><g fill='%23FFFFFF' fill-opacity='0.30'><circle cx='34' cy='47' r='3.6'/><circle cx='44' cy='47' r='3.6'/><circle cx='56' cy='47' r='3.6'/><circle cx='66' cy='47' r='3.6'/><circle cx='38' cy='58' r='3.6'/><circle cx='50' cy='58' r='3.6'/><circle cx='62' cy='58' r='3.6'/></g></svg>");
  --ic-gateway: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'><rect x='16' y='52' width='68' height='28' rx='7'/><path d='M34 52 L26 28'/><path d='M66 52 L74 28'/></g><circle cx='50' cy='66' r='4.5' fill='%23FFFFFF' fill-opacity='0.30'/></svg>");
  --ic-bluetooth: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M46 12 V88'/><path d='M46 50 L72 31 L46 12'/><path d='M46 50 L72 69 L46 88'/></g></svg>");
  --ic-plug: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M34 20 V38'/><path d='M66 20 V38'/><path d='M26 38 H74 V54 C74 66 63 72 50 72 C37 72 26 66 26 54 Z'/><path d='M50 72 V84'/></g></svg>");
  --ic-braces: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><path d='M38 18 C26 18 32 44 18 50 C32 56 26 82 38 82'/><path d='M62 18 C74 18 68 44 82 50 C68 56 74 82 62 82'/></g></svg>");
  --ic-layers: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'><path d='M50 16 L84 34 L50 52 L16 34 Z'/><path d='M16 50 L50 68 L84 50'/><path d='M16 64 L50 82 L84 64'/></g></svg>");
  --ic-branch: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><circle cx='30' cy='24' r='9'/><circle cx='30' cy='78' r='9'/><circle cx='72' cy='42' r='9'/><path d='M30 33 V69'/><path d='M30 54 C30 44 42 42 63 42'/></g></svg>");
  --ic-server: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'><rect x='19' y='22' width='62' height='18' rx='4'/><rect x='19' y='42' width='62' height='18' rx='4'/><rect x='19' y='62' width='62' height='18' rx='4'/></g><g fill='%23FFFFFF' fill-opacity='0.30'><circle cx='31' cy='31' r='3'/><circle cx='31' cy='51' r='3'/><circle cx='31' cy='71' r='3'/></g></svg>");
  --ic-cloud: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M74 72 H30 A16 16 0 0 1 30 40 A24 24 0 0 1 76 46 A13 13 0 0 1 74 72 Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'/></svg>");
  --ic-clipboard: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round'><rect x='24' y='22' width='52' height='64' rx='7'/><rect x='39' y='13' width='22' height='13' rx='5'/></g><g stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><path d='M36 47 H64'/><path d='M36 59 H64'/><path d='M36 71 H55'/></g></svg>");
  --ic-calendar: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'><rect x='17' y='27' width='66' height='57' rx='7'/><path d='M17 45 H83'/><path d='M34 27 V15'/><path d='M66 27 V15'/></g><g fill='%23FFFFFF' fill-opacity='0.30'><circle cx='34' cy='59' r='3.4'/><circle cx='50' cy='59' r='3.4'/><circle cx='66' cy='59' r='3.4'/><circle cx='34' cy='72' r='3.4'/><circle cx='50' cy='72' r='3.4'/></g></svg>");
  --ic-globe: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4'><circle cx='50' cy='50' r='32'/><path d='M18 50 H82'/><path d='M50 18 A16 34 0 0 0 50 82'/><path d='M50 18 A16 34 0 0 1 50 82'/></g></svg>");
  --ic-bell: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M30 68 V47 A20 20 0 0 1 70 47 V68'/><path d='M20 68 H80'/><path d='M43 78 A7 7 0 0 0 57 78'/></g></svg>");
  --ic-clock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'><circle cx='50' cy='50' r='32'/><path d='M50 50 V29'/><path d='M50 50 L67 59'/></g></svg>");
  --ic-trend: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 74 L36 51 L52 63 L86 26'/><path d='M69 26 H86 V43'/></g></svg>");
  --ic-cycle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FFFFFF' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M22 50 A28 28 0 0 1 74 36'/><path d='M63 33 L74 36 L71 47'/><path d='M78 50 A28 28 0 0 1 26 64'/><path d='M37 67 L26 64 L29 53'/></g></svg>");
}

/* Either layer needs the section to be a containing block and its own stacking
   context. Matching .band-motes too, not just .band-emblem, because About's
   .vision carries companions without an emblem - its mark is the CSS shield in
   the section background, so there is no .band-emblem child to key off. */
section:has(> .band-emblem),
section:has(> .band-motes) { position: relative; isolation: isolate; }
/* ALIGNMENT AND SIZE, arrived at by measuring rather than guessing.

   The content column in these bands is 1100-1200px wide depending on template
   (engine-grid, flow, jflow, cards-grid, asset-grid, obligations-grid all
   differ), so at 1920 each gutter runs 360-410px. The emblem is sized off that
   gutter rather than off a fixed pixel value: a fixed box drifts relative to
   the column as the viewport changes, which is what made the first version sit
   under the first card at anything below 1920.

   It takes the gutter PLUS about 50px, so it fills the space beside the column
   and then tucks a little way behind the outer card. That tuck is deliberate —
   these are 5%-opacity background layers, and a soft overlap is the treatment
   the whole set was reviewed in. The previous version subtracted 30px instead,
   which kept it strictly clear of the content but left it small and marooned in
   the middle of a 400px gutter.

   Anchored close to the section edge rather than centred in the gutter: now
   that the emblem is wider than the gutter, centring would push it further over
   the content on one side while opening a gap on the other. */
/* Anchored to the TOP of the band, not its middle. A band's empty gutter is
   only reliably empty at the top: the heading is centred and narrow up there,
   while further down the cards widen and the emblem ends up level with a card
   edge instead of level with the heading. Top-anchoring also makes the mark
   land in the same place on a short band and a long one, which is what makes
   the set read as one system across pages rather than drifting per template.

   Sits nearer the top edge than it first did: clamp(14px, 2.4vh, 38px) rather
   than clamp(26px, 4vh, 64px), so at 1080 tall it starts ~26px in instead of
   ~43px. Small on purpose - the glyph is already inset inside its own square by
   `background-size: contain`, so a few pixels of box offset shifts the visible
   ink by rather more than the number suggests. */
.band-emblem {
  --gutter: calc((100vw - 1220px) / 2);
  --emblem-w: clamp(150px, calc(var(--gutter) + 50px), 430px);
  position: absolute; z-index: -1; pointer-events: none;
  top: clamp(14px, 2.4vh, 38px);
  width: var(--emblem-w); aspect-ratio: 1 / 1;
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
}
/* Tucked a little further into the corner the mark is anchored to. The inset
   shrinks for BOTH sides, which moves a --left mark left and a --right mark
   right: each goes further into its own corner. Nudging every mark literally
   leftward would push the right-hand ones toward the content column instead of
   away from it, which is the opposite of the intent. */
.band-emblem--left  { left:  clamp(2px, 0.5vw, 10px); }
.band-emblem--right { right: clamp(2px, 0.5vw, 10px); }
/* EVERY GLYPH IN THIS SET IS WHITE, so a mark only works on a dark band. The
   one light band that ever carried marks (services' .ind-journey, luminance
   233) had them removed rather than recoloured, so nothing needs the exception
   now and the rule that provided it is gone.

   If a mark is ever placed on a light band again: raising its opacity will not
   help, the ink has to change. `filter: invert(1)` on the layer paints the same
   glyph dark at the same relative weight, and is enough for the white-only
   glyphs. A two-colour emblem needs `invert(1) hue-rotate(180deg)`, or plain
   invert flips its cyan accent to orange. */
/* Kept as an explicit opt-in for the blog markup that already carries it; it
   now matches the default rather than overriding it. */
.band-emblem--top { top: clamp(14px, 2.4vh, 38px); }
.band-emblem--shield-scan { background-image: var(--emblem-shield-scan); }
.band-emblem--shield-key { background-image: var(--emblem-shield-key); }
.band-emblem--chip { background-image: var(--emblem-chip); }
.band-emblem--radar { background-image: var(--emblem-radar); }
.band-emblem--seal { background-image: var(--emblem-seal); }
.band-emblem--doc { background-image: var(--emblem-doc); }
.band-emblem--bus { background-image: var(--emblem-bus); }
.band-emblem--bug { background-image: var(--emblem-bug); }
.band-emblem--ota { background-image: var(--emblem-ota); }
.band-emblem--hex { background-image: var(--emblem-hex); }
.band-emblem--wave { background-image: var(--emblem-wave); }
.band-emblem--vehicle { background-image: var(--emblem-vehicle); }
.band-emblem--car { background-image: var(--emblem-car); }
.band-emblem--ecu { background-image: var(--emblem-ecu); }
.band-emblem--canbus { background-image: var(--emblem-canbus); }
.band-emblem--road { background-image: var(--emblem-road); }
.band-emblem--tower { background-image: var(--emblem-tower); }
.band-emblem--satellite { background-image: var(--emblem-satellite); }
.band-emblem--sweep { background-image: var(--emblem-sweep); }
.band-emblem--chain { background-image: var(--emblem-chain); }
.band-emblem--topology { background-image: var(--emblem-topology); }
.band-emblem--uplink { background-image: var(--emblem-uplink); }
.band-emblem--print { background-image: var(--emblem-print); }
.band-emblem--hash { background-image: var(--emblem-hash); }
.band-emblem--binary { background-image: var(--emblem-binary); }
.band-emblem--funnel { background-image: var(--emblem-funnel); }
.band-emblem--gauge { background-image: var(--emblem-gauge); }
.band-emblem--store { background-image: var(--emblem-store); }
.band-emblem--flag { background-image: var(--emblem-flag); }
.band-emblem--badge { background-image: var(--emblem-badge); }
.band-emblem--rosette { background-image: var(--emblem-rosette); }
.band-emblem--package { background-image: var(--emblem-package); }
.band-emblem--route { background-image: var(--emblem-route); }
.band-emblem--patch { background-image: var(--emblem-patch); }
.band-emblem--cog { background-image: var(--emblem-cog); }
.band-emblem--scale { background-image: var(--emblem-scale); }
.band-emblem--dashboard { background-image: var(--emblem-dashboard); }
.band-emblem--terminal { background-image: var(--emblem-terminal); }
.band-emblem--grid { background-image: var(--emblem-grid); }
.band-emblem--feed { background-image: var(--emblem-feed); }
.band-emblem--triage { background-image: var(--emblem-triage); }
.band-emblem--compass { background-image: var(--emblem-compass); }
.band-emblem--reticle { background-image: var(--emblem-reticle); }
.band-emblem--probe { background-image: var(--emblem-probe); }
.band-emblem--mutation { background-image: var(--emblem-mutation); }
.band-emblem--eye { background-image: var(--emblem-eye); }
.band-emblem--matrix { background-image: var(--emblem-matrix); }
.band-emblem--cap { background-image: var(--emblem-cap); }
.band-emblem--layers { background-image: var(--emblem-layers); }
.band-emblem--blueprint { background-image: var(--emblem-blueprint); }
.band-emblem--gavel { background-image: var(--emblem-gavel); }
.band-emblem--stars { background-image: var(--emblem-stars); }
.band-emblem--checklist { background-image: var(--emblem-checklist); }
.band-emblem--factory { background-image: var(--emblem-factory); }
.band-emblem--team { background-image: var(--emblem-team); }
.band-emblem--pin { background-image: var(--emblem-pin); }
/* ===== COMPANION SCATTER =================================================
   Three small glyphs per band, sitting around the emblem the way the reviewed
   compositions paired them. They are texture, not marks: unlike the emblems,
   which are unique site-wide, a companion recurs across bands on purpose - it
   is the repetition that makes the set read as one material rather than as 25
   separate ornaments.

   Placement is driven off which side the emblem took. The emblem is
   top-anchored and about 400px tall, so it owns the upper half of its own
   gutter; --l (emblem left) puts two companions in the free right gutter and
   drops the third into the left gutter BELOW the emblem, and --r mirrors that.
   Everything stays outside the 1220px content column at every width where the
   layer is visible. */
/* Percentage positions were the first attempt and they put icons inside the
   cards. A percentage resolves against the full-bleed section, so 6% is only
   "in the gutter" if you already know how wide the content is - and the content
   column is NOT 1220px on every template. Measured across every band that
   carries an emblem, the widest content block is about 1600px (the .ind-caps
   grid on services/training), leaving a 152px gutter at a 1900px viewport where
   other bands have 350-400px.

   So both the icon size and its inset are fractions of THAT gutter, and the two
   fractions sum to less than 1 on every layer. An icon therefore cannot reach
   the content edge at any window width - it is arithmetic, not a guess that
   happens to hold at 1920.

   THE FLOOR MATTERS AS MUCH AS THE FORMULA. `(100vw - 1600px) / 2` alone hits
   zero below 1600px, which does not describe these bands at all - the grids are
   fluid and keep their own padding, so the gutter measures 152px at 1900, 123px
   at 1536, 115px at 1440 and 109px at 1366. It narrows, it never collapses.
   Without the 96px floor the icons silently vanished on any window under 1600
   rather than simply getting smaller.

   The emblem still tucks behind the outer card on purpose; that was reviewed
   and is what the 5%-opacity treatment is for. These do not. */
.band-motes {
  --gut: max(96px, calc((100vw - 1600px) / 2));
  /* Three different insets, so the marks do not share an x. Sharing one made a
     column; varying it is most of what makes this read as scattered. */
  --in-a: calc(var(--gut) * 0.14);
  --in-b: calc(var(--gut) * 0.34);
  --in-c: calc(var(--gut) * 0.20);
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
  /* Three sizes rather than one, for the same reason. Opacity stays 0.20
     against the emblems' 0.13 - a 60px glyph carries a fraction of the ink a
     400px emblem does, so at matched opacity it reads far fainter.

     Every layer's inset + size stays under the gutter (0.68 / 0.78 / 0.70), so
     scattering them changes where they sit, never whether they can reach the
     content. That guarantee is independent of the arrangement. */
  background-size:
    min(76px, calc(var(--gut) * 0.54)),
    min(60px, calc(var(--gut) * 0.44)),
    min(68px, calc(var(--gut) * 0.50));
}
/* Scattered across both gutters at three heights. The emblem is top-anchored
   and owns the upper half of its own side, so the mark that shares that side
   sits low, below it - the scatter is loose, but not so loose that the two
   layers collide. */
.band-motes--l {
  background-position:
    right var(--in-a) top 20%,
    left  var(--in-b) top 64%,
    right var(--in-c) top 84%;
}
.band-motes--r {
  background-position:
    left  var(--in-a) top 20%,
    right var(--in-b) top 64%,
    left  var(--in-c) top 84%;
}
/* Same cutoff as .band-emblem. The earlier 1700px was a consequence of the
   broken gutter formula, not a design decision - with the floor in place these
   sit comfortably in a 109px gutter, so they run as wide as the emblems do.

   LOWERED 1440 -> 1200, because 1440 was hiding every mark on the site from most
   of the people looking at it. A 1920 screen at 150% Windows scaling reports
   1280 CSS px and at 125% reports 1536, and browser zoom does the same thing, so
   the ordinary laptop setup fell straight through the old cutoff and saw nothing
   at all. Several rounds of raising the opacity could not have helped: below the
   cutoff these are not faint, they are not painted.

   1200 is where the arithmetic runs out rather than a guess. --gut is floored at
   96px and the widest layer's inset + size is 0.78 of it, so a mark cannot reach
   more than 75px from the band edge at ANY viewport. The content gutter measures
   8.0% of viewport width - 152/1900, 123/1536, 115/1440, 109/1366, the four
   measurements noted above, consistent to within 0.03% - which puts it at 96px
   at a 1200 viewport and leaves 21px of clearance. At 1024 the clearance would
   be 7px, and the layout has gone to tablet by then anyway. */
@media (max-width: 1199px) { .band-motes { display: none; } }

.band-motes--contact    { background-image: var(--ic-globe), var(--ic-clock), var(--ic-bell); }
.band-motes--oems       { background-image: var(--ic-tick), var(--ic-doc), var(--ic-cycle); }
.band-motes--iot        { background-image: var(--ic-clipboard), var(--ic-layers), var(--ic-plug); }
.band-motes--tier12     { background-image: var(--ic-bug), var(--ic-lens), var(--ic-obd); }
.band-motes--platform   { background-image: var(--ic-node), var(--ic-chip), var(--ic-cross); }
.band-motes--fuzzcore   { background-image: var(--ic-warn), var(--ic-term), var(--ic-trend); }
.band-motes--pentestcore { background-image: var(--ic-key), var(--ic-cross), var(--ic-lens); }
.band-motes--threatcore { background-image: var(--ic-signal), var(--ic-cloud), var(--ic-trend); }
.band-motes--vulncore   { background-image: var(--ic-layers), var(--ic-warn), var(--ic-cycle); }
.band-motes--privacy    { background-image: var(--ic-lock), var(--ic-shield), var(--ic-eye); }
/* --svchub removed with the marks it served (services' .ind-journey). */
.band-motes--svcgrid    { background-image: var(--ic-layers), var(--ic-hex), var(--ic-doc); }
.band-motes--consulting { background-image: var(--ic-braces), var(--ic-trend), var(--ic-tick); }
.band-motes--complhub   { background-image: var(--ic-doc), var(--ic-tick), var(--ic-calendar); }
.band-motes--ais        { background-image: var(--ic-clipboard), var(--ic-calendar), var(--ic-doc); }
.band-motes--eucra      { background-image: var(--ic-layers), var(--ic-globe), var(--ic-clipboard); }
.band-motes--unr155     { background-image: var(--ic-doc), var(--ic-cycle), var(--ic-gateway); }
.band-motes--sdv        { background-image: var(--ic-gateway), var(--ic-branch), var(--ic-plug); }
.band-motes--sectest    { background-image: var(--ic-bug), var(--ic-lens), var(--ic-cross); }
.band-motes--fuzztest   { background-image: var(--ic-braces), var(--ic-bluetooth), var(--ic-obd); }
.band-motes--pentest    { background-image: var(--ic-term), var(--ic-doc), var(--ic-warn); }
.band-motes--tara       { background-image: var(--ic-warn), var(--ic-trend), var(--ic-tick); }
.band-motes--threatint  { background-image: var(--ic-signal), var(--ic-bell), var(--ic-server); }
.band-motes--training   { background-image: var(--ic-cap), var(--ic-clipboard), var(--ic-braces); }
.band-motes--terms      { background-image: var(--ic-shield), var(--ic-clock), var(--ic-unlock); }
/* About's vision band. Picked off the copy rather than the page: it argues that
   a machine's software keeps changing for as long as it stays in service, so
   the loop and the shield are the subject, and the globe is the "connected"
   in connected machines. */
.band-motes--about      { background-image: var(--ic-globe), var(--ic-cycle), var(--ic-shield); }

.band-emblem--steps { background-image: var(--emblem-steps); }
.band-emblem--portfolio { background-image: var(--emblem-portfolio); }
.band-emblem--wheel { background-image: var(--emblem-wheel); }
.band-emblem--downlink { background-image: var(--emblem-downlink); }
.band-emblem--evplug { background-image: var(--emblem-evplug); }
/* THE BLOG IS THE ONE EXCEPTION to the z-index -1 rule above.

   Blog pages have no mid-page dark band at all - only the hero and the closing
   CTA are dark - so their emblem goes in the CTA. That band is the better host
   anyway: its copy is centred, so both margins are clear and the emblem can sit
   on either side, which is what makes the left/right alternation possible here.
   The hero could not do that: its copy is hard left on every post, so every
   emblem would have to go right.

   THE CLOSING CTA IS DELIBERATELY UNMARKED. Every page's .final-cta briefly
   carried one and they were removed on request - the CTA is a single centred
   card with one job, and a background mark in its corner competed with the
   button rather than sitting behind copy the way it does in a content band.

   If they ever come back: .final-cta contains .final-bg, an absolutely
   positioned card at z-index 0, so an emblem there needs `z-index: 1` (not the
   default -1, which would hide it behind that card) and must be inserted AFTER
   .final-bg and BEFORE .final-cta-content. That rule is gone rather than left
   dead, but the constraint is written down here so it does not have to be
   rediscovered. */
/* Below this the gutter is too narrow to hold anything worth looking at, so the
   emblem is dropped rather than shrunk to a smudge or allowed to slide under
   the content. Raised from 1150px, where the gutter had already closed to
   nothing and the emblem was overlapping the first card.

   LOWERED 1440 -> 1200 alongside .band-motes; the derivation is written out
   there. The emblem is the looser of the two constraints, not the binding one:
   it is floored at 150px wide and already tucks behind the content edge on
   purpose, so a narrower viewport makes it LESS intrusive rather than more - it
   sits about 60px behind the copy at 1200 against 256px at 1920. The old 1440
   was inherited from the motes' geometry rather than derived from its own. */
@media (max-width: 1199px) { .band-emblem { display: none; } }