/*
Theme Name: Nucleo System
Theme URI: https://nucleosystem.com/
Author: Nucleo System
Author URI: https://nucleosystem.com/
Description: A fast, dark business theme built for Nucleo System — a software company working in .NET, Blazor, React, PHP, iOS and Android. Dark throughout, with a live system diagram, a moving stack ticker, service rows, a scope estimator, a build timeline and a working enquiry form. Colours are taken from the company logo. Every word is editable from Appearance > Customize > Nucleo System. No page builder or plugin required.
Version: 3.8.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nucleo-system
Tags: business, portfolio, one-column, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* --- Brand -------------------------------------------------
     Sampled from assets/img/nucleoSystemLogo.png. Three colours
     and no more: the azure the SYSTEM wordmark is set in, the
     violet the mark's gradient runs down to, and the deep navy
     of NUCLEO. These three do not change between themes - only
     the surfaces around them do. */
  --core: #0054e4;
  --core-rgb: 0, 84, 228;
  --violet: #301890;
  --violet-rgb: 48, 24, 144;
  --navy: #001860;
  --navy-rgb: 0, 24, 96;

  /* White stays white on a brand-blue fill, in either theme. This
     is separate from --on-shell-strong, which is band text and
     does flip. */
  --on-accent: #ffffff;

  --core-dark: #003399;
  --core-soft: #2f6de8;
  --core-tint: #dfe8ff;
  --core-wash: #f1f5ff;
  --signal: #0054e4;
  --signal-rgb: 0, 84, 228;

  /* --- Surfaces (light is the default) ---------------------- */
  --shell: #eaeefb;
  --paper: #f4f6fd;
  --panel: #ffffff;
  --panel-sunk: #f7f9ff;
  --shell-2: #e3e9f9;
  --shell-3: #dcdcf9;

  --header-bg: linear-gradient(180deg, #ffffff 0%, #eef2fd 100%);
  --header-line: #d3dcf2;

  /* --- Ink -------------------------------------------------- */
  --ink: var(--navy);
  --ink-soft: #3e4a75;
  --ink-faint: #56628c;
  --on-shell: #17204a;
  --on-shell-soft: #4d5980;
  --on-shell-strong: var(--navy);

  --link: #003cb0;
  --link-hover: #002a85;

  --btn-light-bg: #001860;
  --btn-light-ink: #ffffff;
  --btn-light-hover: #002a85;

  --shadow-rgb: 0, 24, 96;

  /* --- Lines ------------------------------------------------ */
  --rule: #ccd5ee;
  --rule-soft: #e3e9f8;
  --line-dark: rgba(var(--navy-rgb), .13);
  --line-dark-strong: rgba(var(--navy-rgb), .2);
  --line-dark-hi: rgba(var(--navy-rgb), .32);
  --fill-dark: rgba(var(--navy-rgb), .04);
  --fill-dark-2: rgba(var(--navy-rgb), .06);
  --grid-line: rgba(var(--navy-rgb), .055);

  /* --- Illustrations and the hero diagram ------------------- */
  --art-line: #7d93dd;
  --art-line-hi: #0054e4;
  --art-fill: #e6ecfc;
  --art-sunk: #f5f8ff;
  --wire: #a2b2e2;
  --node-fill: rgba(255, 255, 255, .92);
  --node-fill-active: #dfe8ff;
  --node-line: #c2cdea;

  /* --- Status ----------------------------------------------- */
  --ok-bg: #e8f6ee;  --ok-line: #96cfad;  --ok-ink: #13502b;
  --bad-bg: #fdeceb; --bad-line: #efb2ac; --bad-ink: #7c1d1d;

  /* --- The logo's sweep -------------------------------------
     --grad-btn stays inside colours white can sit on. --grad-brand
     runs the mark's full azure-to-violet for bars and rules. */
  --grad-btn: linear-gradient(100deg, var(--violet) 0%, var(--core) 55%, var(--core-dark) 100%);
  --grad-brand: linear-gradient(135deg, var(--core) 0%, #1f3fc4 55%, var(--violet) 100%);
  --grad-brand-v: linear-gradient(180deg, var(--core) 0%, #1f3fc4 50%, var(--violet) 100%);

  /* --- Elevation -------------------------------------------- */
  --shadow-sm: 0 2px 6px rgba(var(--shadow-rgb), .07);
  --shadow-md: 0 14px 34px rgba(var(--shadow-rgb), .11);
  --shadow-lg: 0 22px 54px rgba(var(--shadow-rgb), .12);
  --shadow-dark: 0 18px 40px rgba(var(--shadow-rgb), .16);
  --glow: 0 8px 20px rgba(var(--core-rgb), .22);
  --glow-hover: 0 12px 28px rgba(var(--core-rgb), .30);

  /* Section background icons. See the dark block below: the brand blue
     is a mid tone and disappears on a near-black page, so dark draws
     these in a lighter blue instead. */
  --fx-icon-1: var(--core);
  --fx-icon-2: var(--violet);
  --fx-icon: .26;

  /* --- Type ------------------------------------------------- */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step--1: clamp(.83rem, .81rem + .09vw, .88rem);
  --step-0: clamp(1rem, .97rem + .16vw, 1.08rem);
  --step-1: clamp(1.08rem, 1.03rem + .24vw, 1.22rem);
  --measure: 66ch;

  /* --- Space & shape ---------------------------------------- */
  --shell-w: 1220px;
  --gap: clamp(24px, 4.5vw, 72px);
  --pad-y: clamp(66px, 9.5vw, 136px);
  --radius: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 100px;

  color-scheme: light;
}

/* ============================================================
   1b. Dark theme
   ------------------------------------------------------------
   Light is the default, so this block carries the overrides.
   The three brand colours are absent on purpose: they are the
   logo, and the logo does not change between themes.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* --- Surfaces --- */
  --shell: #020610;
  --paper: #040918;
  --panel: #0a1128;
  --panel-sunk: #06091c;
  --shell-2: #070c26;
  --shell-3: #1e1559;
  --header-bg: linear-gradient(180deg, #0c1436 0%, #04091f 100%);
  --header-line: #1e2750;

  /* --- Ink --- */
  --ink: #e7ebf8;
  --ink-soft: #a7b1d0;
  --ink-faint: #7e88a8;
  --on-shell: #e7ebf8;
  --on-shell-soft: #939ec1;
  --on-shell-strong: #ffffff;
  --link: #6d9cff;
  --link-hover: #a3c1ff;

  /* --- Brand, adjusted for a dark ground --- */
  --core-dark: #003cb0;
  --core-soft: #5b8dff;
  --core-tint: #10204f;
  --core-wash: #090f2c;
  --signal: #5b8dff;
  --signal-rgb: 91, 141, 255;

  /* --- Buttons and lines --- */
  --btn-light-bg: #ffffff;
  --btn-light-ink: #001860;
  --btn-light-hover: #dbe5ff;
  --rule: #1b2444;
  --rule-soft: #141b38;
  --line-dark: rgba(255, 255, 255, .10);
  --line-dark-strong: rgba(255, 255, 255, .17);
  --line-dark-hi: rgba(255, 255, 255, .28);
  --fill-dark: rgba(255, 255, 255, .04);
  --fill-dark-2: rgba(255, 255, 255, .07);
  --grid-line: rgba(255, 255, 255, .05);

  /* --- Illustrations and the diagram --- */
  --art-line: #4a5fbb;
  --art-line-hi: #86aaff;
  --art-fill: #16204e;
  --art-sunk: #050a1e;
  --wire: #33428a;
  --node-fill: rgba(13, 22, 58, .92);
  --node-fill-active: #18245e;
  --node-line: #29356c;

  /* --- Status --- */
  --ok-bg: #0f2b1c;
  --ok-line: #2f6b47;
  --ok-ink: #8fe0b0;
  --bad-bg: #2e1417;
  --bad-line: #7a3038;
  --bad-ink: #ffb3b0;

  /* --- Elevation --- */
  --shadow-rgb: 0, 0, 0;
  --shadow-sm: 0 2px 8px rgba(var(--shadow-rgb), .30);
  --shadow-md: 0 14px 34px rgba(var(--shadow-rgb), .42);
  --shadow-lg: 0 22px 54px rgba(var(--shadow-rgb), .50);
  --shadow-dark: 0 20px 44px rgba(0, 0, 0, .45);
  --glow: 0 8px 20px rgba(var(--core-rgb), .26);
  --glow-hover: 0 12px 28px rgba(var(--core-rgb), .34);

  /* --- Background icons --- */
  --fx-icon-1: #8ab4ff;
  --fx-icon-2: #9d8cff;
  --fx-icon: .22;
}


/* ============================================================
   2. Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .15s ease;
}
a:hover { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.016em;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.75rem + 2.35vw, 3.35rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.026em; }
h2 { font-size: clamp(1.72rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.12rem, 1.05rem + .34vw, 1.3rem); letter-spacing: -0.01em; }
h4 { font-size: clamp(1.04rem, 1rem + .2vw, 1.15rem); font-weight: 600; letter-spacing: -0.008em; }
h5, h6 { font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }

/* text-wrap: pretty keeps a single word off the last line. Ignored by
   browsers that do not support it, so it costs nothing. */
p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--core-soft); outline-offset: 3px; border-radius: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--panel); color: var(--ink);
  padding: 10px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display); font-size: var(--step--1);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ============================================================
   2a. Section background icons
   ------------------------------------------------------------
   Each content section gets a few of the sprite's own icons
   scattered behind it at very low opacity - code, a database, a
   server, a handset - so the background reads as the subject of
   the site rather than as decoration.

   The layer is built in theme.js rather than in the templates:
   it is purely ornamental, so it has no business in the markup,
   and with scripting off nothing is added at all.
   ============================================================ */
.strip { position: relative; }
.strip > .shell { position: relative; z-index: 1; }

.sec-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
.sec-fx .ico {
  position: absolute;
  color: var(--fx-icon-1);
  opacity: var(--fx-icon);
  /* Lighter than the content icons: at this size a 1.7 stroke reads as a
     drawing rather than as a watermark. */
  stroke-width: 1;
  animation: fx-float 22s ease-in-out infinite alternate;
}
.sec-fx .ico--violet { color: var(--fx-icon-2); }

@keyframes fx-float {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -20px, 0) rotate(7deg); }
}

/* Under 760px the content runs edge to edge, so these would sit directly
   behind the words rather than beside them. */
@media (max-width: 760px) { .sec-fx { display: none; } }

/* ============================================================
   2b. Scroll reveal
   ------------------------------------------------------------
   The hidden state is scoped to .has-reveal, which the inline
   script in wp_head only adds when it has both an observer to
   reveal with and a visitor who has not asked for less motion.
   With JavaScript off the class never lands and every one of
   these rules is inert, so the page is never left blank.

   The hero is deliberately outside this: the first frame should
   be the finished page, not an empty band waiting on a scroll.
   ============================================================ */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.has-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
  transition:
    opacity .6s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .6s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
}

/* ============================================================
   3. Layout primitives
   ============================================================ */
.shell {
  width: 100%;
  max-width: var(--shell-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* Half padding on every section so two neighbours add up to one --pad-y gap. */
.strip { padding-block: calc(var(--pad-y) * .5); }

/* One column. The margin label that used to sit beside each section has
   been removed, so .band is simply the section's content well now. */
.band { display: block; }

/* ============================================================
   4. Header — sits on the dark hero
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color: var(--on-shell);
}

.site-header__inner { display: flex; align-items: center; gap: 18px; height: 74px; }

.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--on-shell-strong); margin-right: auto;
  min-width: 0;
}
/* The lockup is horizontal now, so it buys its wordmark size from width
   rather than height: 42px tall reads larger than the stacked mark did at
   76px. Two files ship, because NUCLEO is set in a near-black navy that
   vanishes on a dark ground - the dark variant lifts that one word. Only
   one is ever displayed. */
.brand__logo { display: block; height: 42px; width: auto; flex: none; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark  { display: block; }
.brand img.custom-logo { max-height: 42px; width: auto; }

.nav__list {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  list-style: none; margin: 0; padding: 0;
}
.nav__list a {
  font-family: var(--font-display);
  font-size: .97rem; font-weight: 500;
  color: var(--on-shell); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
  display: inline-block;
  transition: color .15s ease, border-color .15s ease;
}
.nav__list a:hover,
.nav__list .current-menu-item > a { border-bottom-color: var(--signal); color: var(--on-shell-strong); }

.nav__list ul {
  position: absolute; list-style: none; margin: 6px 0 0; padding: 8px;
  background: var(--shell-2); border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dark);
  min-width: 210px; display: none;
}
.nav__list li { position: relative; }
.nav__list li:hover > ul,
.nav__list li:focus-within > ul { display: block; }
.nav__list ul a { padding: 8px 10px; display: block; border: 0; }


/* ---- theme switch: a plain icon button, no track, no chrome ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--on-shell-soft);
  cursor: pointer;
  position: relative;
  transition: background-color .18s ease, color .18s ease;
}
.theme-toggle:hover {
  background: var(--fill-dark-2);
  color: var(--on-shell-strong);
}
.theme-toggle:focus-visible { outline: 2px solid var(--core-soft); outline-offset: 2px; }

/* Both icons sit in the DOM and cross-fade, so the change animates rather
   than popping. Only one is ever visible. A finer stroke than the content
   icons carry, because this one is small and sits in chrome. */
.theme-toggle .ico {
  position: absolute;
  width: 15px; height: 15px;
  stroke-width: 1.6;
  transition: opacity .22s ease, transform .32s ease;
}
.theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle__sun  { opacity: 0; transform: rotate(70deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__sun  { opacity: 1; transform: rotate(0) scale(1); }

@media (max-width: 520px) {
  .theme-toggle { width: 30px; height: 30px; }
  .theme-toggle .ico { width: 14px; height: 14px; }
}


.nav-toggle {
  display: none; align-items: center; gap: 9px;
  background: transparent; border: 1px solid var(--line-dark-hi);
  border-radius: var(--radius); padding: 9px 13px;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 500;
  color: var(--on-shell-strong); cursor: pointer;
}
.nav-toggle__bars { display: block; width: 17px; height: 9px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--on-shell-strong);
  transition: transform .2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--shell-2); border-bottom: 1px solid var(--line-dark);
    padding: 14px clamp(20px, 5vw, 56px) 20px;
  }
  .site-nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__list a { padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
  .nav__list ul { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 14px; background: transparent; }
}

@media (max-width: 520px) {
  .brand__logo { height: 34px; }
  .site-header__inner { gap: 10px; height: 60px; }
}

/* ============================================================
   5. Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1;
  letter-spacing: -0.006em;
  padding: 15px 26px; border-radius: var(--radius);
  border: 1.5px solid transparent;
  background-color: var(--core);
  background-image: var(--grad-btn);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: var(--on-accent);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--glow);
  transition: background-position .4s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
/* Hover slides along the gradient rather than swapping colour, so the
   button moves the way the logo does. */
.btn:hover {
  background-position: 100% 50%;
  color: var(--on-accent);
  box-shadow: var(--glow-hover);
  transform: translateY(-1px);
}
/* Settle back on press, so the button feels like it takes the click. */
.btn:active { transform: translateY(0); box-shadow: var(--glow); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--rule); box-shadow: none;
}
.btn--ghost:hover {
  background: var(--core-wash); color: var(--link);
  border-color: var(--core); box-shadow: none;
}

.btn--onshell {
  background: transparent; color: var(--on-shell-strong);
  border-color: var(--line-dark-hi); box-shadow: none;
}
.btn--onshell:hover {
  background: var(--fill-dark-2); color: var(--on-shell-strong);
  border-color: var(--on-shell-strong); box-shadow: none;
}

/* Deliberately light, on the dark CTA band. It does not follow --panel,
   which is now itself dark. */
.btn--light {
  background: var(--btn-light-bg); color: var(--btn-light-ink);
  border-color: var(--btn-light-bg); box-shadow: var(--shadow-dark);
}
.btn--light:hover {
  background: var(--btn-light-hover); border-color: var(--btn-light-hover);
  color: var(--btn-light-ink);
}

.btn--small { padding: 11px 18px; font-size: var(--step--1); box-shadow: none; }

/* ============================================================
   6. Hero — full bleed, dark, blueprint grid
   ============================================================ */
.hero,
.page-hero {
  position: relative;
  background: var(--shell);
  color: var(--on-shell);
  padding-bottom: clamp(36px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}

/* Three layers behind the hero copy, back to front: a blueprint grid that
   drifts one cell and repeats, a violet glow that breathes, and a canvas of
   circuit traces with pulses running along them. Each is decorative and each
   stops for prefers-reduced-motion. */
.hero::before,
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -3;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 10%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 10%, #000 35%, transparent 78%);
  animation: hero-grid 34s linear infinite;
}
/* One full cell, so the loop is seamless. */
@keyframes hero-grid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 56px, 56px 56px; }
}

.hero::after,
.page-hero::after {
  content: "";
  position: absolute; z-index: -2;
  right: -14%; top: 10%;
  width: 760px; height: 760px; max-width: 92vw;
  background: radial-gradient(circle, rgba(var(--violet-rgb), .30) 0%, rgba(var(--core-rgb), .12) 44%, transparent 68%);
  pointer-events: none;
  animation: hero-glow 22s ease-in-out infinite alternate;
}
@keyframes hero-glow {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(-5%, 5%, 0) scale(1.14); opacity: 1; }
}

.hero__circuit {
  position: absolute; inset: 0; z-index: -1;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}

.hero__inner { padding-top: clamp(52px, 8vw, 100px); }

/* Inner pages open with a shorter version of the same band, and carry an
   illustration in the second column that matches what the page is about. */
.page-hero { padding-block: clamp(52px, 7vw, 92px) clamp(44px, 6vw, 76px); }
.page-hero__inner { position: relative; }
.page-hero__grid { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }
.page-hero--art .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
@media (max-width: 900px) {
  .page-hero--art .page-hero__grid { grid-template-columns: 1fr; }
}
.page-hero h1 { color: var(--on-shell-strong); max-width: 20ch; margin-bottom: .3em; }
.page-hero__lead {
  font-size: var(--step-1);
  color: var(--on-shell-soft);
  max-width: 54ch; line-height: 1.6; margin: 0;
}
/* In a band the illustration is the hero image, not a figure under a
   paragraph, so it loses the spacing it carries inside a section. */
.page-hero .art { margin: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 500;
  color: var(--on-shell);
  background: var(--fill-dark-2);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-pill); padding: 7px 15px 7px 11px;
  margin-bottom: 22px;
}
.hero__kicker i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); display: inline-block; flex: none;
  box-shadow: 0 0 0 4px rgba(var(--signal-rgb), .2);
}

.hero__title { color: var(--on-shell-strong); margin-bottom: .34em; max-width: 18ch; }
.hero__lead {
  font-size: var(--step-1);
  color: var(--on-shell-soft);
  max-width: 54ch; line-height: 1.6;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 66px);
  background: var(--line-dark-strong);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero__facts div { background: var(--fill-dark); padding: 18px 20px; }
.hero__facts b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.22rem; color: var(--on-shell-strong); letter-spacing: -0.02em; margin-bottom: 2px;
}
.hero__facts span { color: var(--on-shell-soft); font-size: .98rem; line-height: 1.5; }

/* ---- system diagram ---- */
.diagram { position: relative; }
.diagram__svg { width: 100%; height: auto; display: block; overflow: visible; }

.diagram .wire {
  fill: none;
  stroke: var(--wire);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: wire-draw 1s ease forwards;
}
.diagram .wire--2 { animation-delay: .12s; }
.diagram .wire--3 { animation-delay: .24s; }
.diagram .wire--4 { animation-delay: .36s; }
@keyframes wire-draw { to { stroke-dashoffset: 0; } }

/* pathLength="1" means the dash can be written as a fraction of the whole
   wire, whatever its real length, so all four pulses run at one speed. */
.diagram .wire-flow {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: .07 .93;
  stroke-dashoffset: 1;
  animation: wire-flow 3.2s linear infinite;
  filter: drop-shadow(0 0 5px rgba(var(--signal-rgb), .75));
}
.diagram .wire-flow--2 { animation-delay: .8s; }
.diagram .wire-flow--3 { animation-delay: 1.6s; }
.diagram .wire-flow--4 { animation-delay: 2.4s; }
@keyframes wire-flow { to { stroke-dashoffset: 0; } }

.diagram .orbit { fill: none; stroke: rgba(var(--signal-rgb), .45); stroke-width: 1.4; }
.diagram .orbit--dashed {
  stroke-dasharray: 5 9;
  transform-origin: 130px 200px;
  animation: orbit-spin 46s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.diagram .sat {
  transform-origin: 130px 200px;
  transform-box: view-box;
}
.diagram .sat circle { fill: var(--signal); }
.diagram .sat--1 {
  animation: orbit-spin 19s linear infinite;
  filter: drop-shadow(0 0 8px rgba(var(--signal-rgb), .9));
}

/* Ripples leaving the core. They finish transparent, so under
   prefers-reduced-motion they simply are not drawn. */
.diagram .core-halo {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  transform-origin: 130px 200px;
  transform-box: view-box;
  animation: core-ripple 4s ease-out infinite;
}
.diagram .core-halo--2 { animation-delay: 2s; }
@keyframes core-ripple {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.72); opacity: 0; }
}

.diagram .core-ring {
  fill: none;
  stroke: rgba(var(--signal-rgb), .55);
  stroke-width: 1.8;
  stroke-dasharray: 3 11;
  stroke-linecap: round;
  transform-origin: 130px 200px;
  transform-box: view-box;
  animation: orbit-spin 24s linear infinite reverse;
}

/* The gradient stops are styled here rather than hardcoded in the SVG, so
   the core glows in whatever --core is set to. */
.core-grad-a { stop-color: var(--core); }
.core-grad-b { stop-color: var(--violet); }
.core-glow-a { stop-color: var(--core); stop-opacity: .55; }
.core-glow-b { stop-color: var(--core); stop-opacity: 0; }

.diagram .core-body {
  fill: url(#nucleoCore);
  transform-origin: 130px 200px;
  transform-box: view-box;
  animation: core-breathe 5.5s ease-in-out infinite;
}
@keyframes core-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
.diagram .core-label {
  font-family: var(--font-display); font-weight: 700; font-size: 23px;
  fill: var(--on-accent); text-anchor: middle; letter-spacing: -0.02em;
}

/* The bars do not move. An earlier version floated them, which made them
   drift out from under a stationary cursor - mouseout, resume, drift back,
   mouseover - so the bar and the caption both flickered. Everything that
   animates now is either inside the core or travelling along a wire, which
   keeps the hover target still. */
.node { cursor: pointer; }

.node__bar {
  fill: var(--node-fill);
  stroke: var(--node-line);
  stroke-width: 1.8;
  transition: fill .18s ease, stroke .18s ease;
}
.node__accent {
  fill: var(--signal);
  opacity: .35;
  transition: opacity .18s ease;
}
.node__label {
  font-family: var(--font-display); font-weight: 500; font-size: 21px;
  fill: var(--on-shell); text-anchor: start; pointer-events: none;
  letter-spacing: -0.01em;
  transition: fill .18s ease;
}

.node:hover .node__bar,
.node:focus-visible .node__bar,
.node.is-active .node__bar {
  fill: var(--node-fill-active);
  stroke: var(--core-soft);
}
.node:hover .node__accent,
.node:focus-visible .node__accent,
.node.is-active .node__accent { opacity: 1; }

.node:hover .node__label,
.node:focus-visible .node__label,
.node.is-active .node__label { fill: var(--on-shell-strong); }

/* A fixed height, not a minimum. Hovering a bar swaps this text for a much
   longer one; on min-height the box grew, the diagram column grew with it,
   and because .hero__grid centres its items the whole column re-centred and
   shifted the SVG out from under the cursor - mouseout, text reverts, box
   shrinks, mouseover. Pinning the height breaks that loop. 104px holds the
   longest description at the narrowest two-column width. */
.diagram__caption {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line-dark-strong);
  display: flex; flex-wrap: wrap; align-items: baseline;
  align-content: flex-start; gap: 5px 12px;
  height: 104px;
  overflow: hidden;
}
.diagram__caption b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--on-shell-strong); }
.diagram__caption span { color: var(--on-shell-soft); font-size: 1rem; }

/* Small screens: SVG text would drop below readable size, so the same four
   blocks are shown as a list instead. */
.diagram__list { display: none; }

@media (max-width: 760px) {
  .diagram__svg, .diagram__caption { display: none; }
  .diagram__list {
    display: grid; gap: 0; list-style: none; margin: 0; padding: 0;
    background: var(--fill-dark);
    border: 1px solid var(--line-dark-strong);
    border-radius: var(--radius);
  }
  .diagram__list li {
    display: grid; gap: 3px; padding: 16px 18px;
    border-bottom: 1px solid var(--line-dark);
  }
  .diagram__list li:last-child { border-bottom: 0; }
  .diagram__list b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--on-shell-strong); }
  .diagram__list span { color: var(--on-shell-soft); font-size: .98rem; line-height: 1.55; }
}

/* ============================================================
   7. Stack ticker
   ============================================================ */
.ticker {
  background: var(--shell-2);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; width: max-content;
  animation: ticker-run 38s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

.ticker__group { display: flex; align-items: center; }
.ticker__group span {
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  color: var(--on-shell); padding: 0 24px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 24px;
}
.ticker__group span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal); opacity: .8; display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .ticker { mask-image: none; -webkit-mask-image: none; }
  .ticker__track { flex-wrap: wrap; width: auto; justify-content: center; animation: none; }
}

/* ============================================================
   8. Services — hairline rows with a live hover
   ============================================================ */
/* Three across, dropping to two then one. Explicit counts rather than
   auto-fit, because auto-fit was giving four at full width. */
.svc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.svc {
  display: grid; align-content: start; gap: 0;
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: 22px 22px 24px;
  position: relative; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.svc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand-v);
  opacity: .85;
}
.svc:hover {
  border-color: var(--core-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.svc:hover h3 { color: var(--link); }

.svc h3 { margin: 0 0 .45em; font-size: var(--step-1); letter-spacing: -0.016em; transition: color .18s ease; }
.svc p { color: var(--ink-soft); margin: 0; font-size: var(--step--1); line-height: 1.62; }
.svc__tags { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.svc__tags li {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 500;
  color: var(--link); background: var(--core-tint);
  border-radius: 4px; padding: 3px 9px;
}

@media (max-width: 1000px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .svc-list { grid-template-columns: 1fr; } }

/* ============================================================
   8b. About
   ============================================================ */
.about__lead { font-size: var(--step-1); color: var(--ink); }
.about p { color: var(--ink-soft); }

.about__stats {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* The 1px gap over a ruled background is what draws the dividers, so the
   cells need their own fill or the grid shows through. */
.about__stats li {
  background: var(--panel);
  padding: 18px 20px;
  display: grid; gap: 3px; align-content: start;
}
.about__stats b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  color: var(--ink); letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.about__stats span {
  color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45;
}

/* ============================================================
   8c. Technology
   ============================================================ */
.tech__intro { color: var(--ink-soft); max-width: 64ch; }

/* Three across, matching the services and industries grids. Explicit
   counts rather than auto-fit, which was giving four at full width. */
.tech {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}
@media (max-width: 1000px) { .tech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tech { grid-template-columns: 1fr; } }
.tech__group {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: 18px 20px 20px 23px;
  position: relative; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.tech__group::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand-v);
}
.tech__group:hover { border-color: var(--core-tint); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tech__group h3 {
  font-size: var(--step-0); font-weight: 600; margin: 0 0 12px;
  letter-spacing: -0.012em; color: var(--ink);
}
.tech__group ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tech__group li {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 500;
  color: var(--link); background: var(--core-tint);
  border-radius: 4px; padding: 4px 10px;
}

/* ============================================================
   8d. Shared blocks — cards, split rows, section leads
   ============================================================ */
.section-lead { color: var(--ink-soft); max-width: 64ch; }
.strip--tight { padding-block: calc(var(--pad-y) * .3); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: var(--gap);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
/* Exactly three across, for the blocks that read as a row of three rather
   than as many as will fit. */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cards--3 { grid-template-columns: 1fr; } }
.cards__item {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: 20px 22px 22px;
  position: relative; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.cards__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand-v);
  opacity: .85;
}
.cards__item:hover { border-color: var(--core-tint); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cards__item h3 { margin: 0 0 .45em; font-size: var(--step-1); letter-spacing: -0.016em; }
.cards__item p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }

/* A plain variant for when the cards sit beside an illustration and the
   accent bars would fight it. */
.cards--plain { grid-template-columns: 1fr; gap: 12px; }
.cards--plain .cards__item { background: transparent; border-color: transparent; padding: 8px 0 8px 18px; }
.cards--plain .cards__item:hover { transform: none; border-color: transparent; }

.cards--numbered .cards__item { padding-top: 22px; }
.cards__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600;
  color: var(--link); letter-spacing: .08em;
  margin-bottom: 8px; font-variant-numeric: tabular-nums;
}

/* ---- routes: three ways into the rest of the site ---- */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px; margin-top: 30px;
}
.routes__item {
  display: grid; align-content: start; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: 22px 22px 20px;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.routes__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand-v);
}
.routes__item:hover {
  border-color: var(--core-tint);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.routes__item h3 { margin: 0; font-size: var(--step-1); letter-spacing: -0.016em; color: var(--ink); }
.routes__item p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }
.routes__go {
  display: inline-flex; align-items: center; margin-top: 4px;
  color: var(--link); transition: transform .18s ease;
}
.routes__item:hover .routes__go { transform: translateX(5px); }

/* ---- faq: <details>, so it works with no script ---- */
.faq { margin-top: 30px; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 2px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); letter-spacing: -0.014em; color: var(--ink);
  list-style: none;
  transition: color .18s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--link); }
.faq__item summary:focus-visible { outline: 3px solid var(--core-soft); outline-offset: -3px; }

/* The marker is drawn rather than a glyph, so it can rotate into a minus. */
.faq__item summary i {
  position: relative; flex: none; width: 18px; height: 18px; margin-top: 4px;
}
.faq__item summary i::before,
.faq__item summary i::after {
  content: ""; position: absolute; inset: 8px 0 auto;
  height: 2px; border-radius: 2px; background: var(--link);
  transition: transform .22s ease;
}
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__item[open] summary { color: var(--link); }
.faq__item p {
  margin: 0 0 22px; padding-right: 38px;
  color: var(--ink-soft); max-width: 72ch;
}

/* ============================================================
   8c2. Testimonials
   ============================================================ */
/* A scroll-snap track rather than a scripted slider. Touch swipe, trackpad,
   shift-wheel and keyboard scrolling all come from the browser, and with no
   JavaScript at all it stays a usable swipeable row - the script only adds
   the buttons and dots on top. */
.quotes { position: relative; }
.quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
  margin-top: 30px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for the cards' hover lift, which would otherwise be clipped */
  padding: 4px 4px 8px;
  margin-inline: -4px;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track:focus-visible { outline: 3px solid var(--core-soft); outline-offset: 4px; border-radius: var(--r-md); }
.quotes .quote { scroll-snap-align: start; }

@media (max-width: 1000px) { .quotes__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 640px)  { .quotes__track { grid-auto-columns: 100%; } }
@media (prefers-reduced-motion: reduce) { .quotes__track { scroll-behavior: auto; } }

.quotes__nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 20px;
}
.quotes__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--link);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.quotes__btn .ico { width: 17px; height: 17px; stroke-width: 2; }
.quotes__btn:hover:not(:disabled) { border-color: var(--core); background: var(--core-wash); }
.quotes__btn:focus-visible { outline: 3px solid var(--core-soft); outline-offset: 2px; }
.quotes__btn:disabled { opacity: .35; cursor: default; }

.quotes__dots { display: flex; align-items: center; gap: 7px; }
.quotes__dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.quotes__dot.is-on { width: 22px; border-radius: 4px; background: var(--core); }
.quotes__dot:focus-visible { outline: 2px solid var(--core-soft); outline-offset: 3px; }

.quote {
  display: grid; align-content: start; gap: 0;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: 22px 22px 20px;
  position: relative; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.quote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand-v);
  opacity: .85;
}
.quote:hover {
  border-color: var(--core-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.quote__mark { display: block; color: var(--link); opacity: .55; margin-bottom: 10px; }
.quote__mark .ico { width: 26px; height: 26px; }

.quote blockquote {
  margin: 0 0 18px;
  border: 0; padding: 0; font-style: normal;
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.62;
}
.quote blockquote p { margin: 0 0 .7em; max-width: none; }
.quote blockquote p:last-child { margin-bottom: 0; }

.quote figcaption {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}
.quote__face {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.quote__who { display: grid; gap: 1px; min-width: 0; }
.quote__who b {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step--1); color: var(--ink); letter-spacing: -0.006em;
}
.quote__who span {
  font-size: var(--step--1); color: var(--ink-faint); line-height: 1.4;
}

/* ============================================================
   8d2. Icons
   ------------------------------------------------------------
   One sprite, stroked in currentColor, so a badge sets the
   colour once and the icon inside follows it.
   ============================================================ */
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 22px; height: 22px;
  flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.ico-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-md);
  background: var(--core-tint);
  color: var(--link);
  margin-bottom: 14px;
  transition: background-color .18s ease, color .18s ease;
}
.ico-badge--sm { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 10px; }
.ico-badge--sm .ico { width: 18px; height: 18px; }

/* Lift the badge with the card it sits in. */
.cards__item:hover .ico-badge,
.routes__item:hover .ico-badge,
.tech__group:hover .ico-badge {
  background: rgba(var(--core-rgb), .3);
  color: var(--link-hover);
}

.svc:hover .ico-badge { background: rgba(var(--core-rgb), .3); color: var(--link-hover); }

/* Work cards: badge above the sector line. */
.work__item .ico-badge { margin-bottom: 12px; }
.work__item:hover .ico-badge { background: rgba(var(--core-rgb), .3); color: var(--link-hover); }

/* Estimator chips carry the icon inline with the module name. */
.est__chip-body b { display: flex; align-items: center; gap: 9px; }
.est__chip-body b .ico { width: 18px; height: 18px; color: var(--link); }
.est__chip input:checked + .est__chip-body b .ico { color: var(--link-hover); }

@media (max-width: 520px) {
  .ico-badge { width: 38px; height: 38px; margin-bottom: 12px; }
  .ico { width: 20px; height: 20px; }
}

/* ============================================================
   8e. Illustrations
   ------------------------------------------------------------
   Decorative SVG, animated in CSS only. Every one of these stops
   under the global prefers-reduced-motion rule near the top of
   this file, which freezes animation across the whole theme.
   ============================================================ */
.art { margin: 34px 0 4px; }
.art svg {
  width: 100%; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 16px 42px rgba(var(--core-rgb), .22));
}

.art__body {
  fill: var(--art-fill);
  stroke: var(--art-line);
  stroke-width: 2;
}
.art__screen { fill: var(--art-sunk); stroke: var(--art-line); stroke-width: 1.2; }

.art__bar {
  fill: var(--core-soft);
  opacity: .55;
  animation: art-shimmer 3.4s ease-in-out infinite;
}
.art__bar:nth-of-type(even) { animation-delay: -1.1s; }
.art__bar:nth-of-type(3n)   { animation-delay: -2.2s; }
@keyframes art-shimmer {
  0%, 100% { opacity: .34; }
  50%      { opacity: .95; }
}

.art__panel { fill: rgba(var(--core-rgb), .30); stroke: var(--core-soft); stroke-width: 1.3; opacity: .9; }
.art__panel--1 { animation: art-shimmer 4.2s ease-in-out infinite; }
.art__panel--2 { animation: art-shimmer 4.2s ease-in-out infinite -2.1s; }

.art__bus, .art__stub, .art__spine {
  fill: none;
  stroke: var(--art-line);
  stroke-width: 2;
}
.art__spine { stroke-dasharray: 4 8; }

/* The same travelling-dash trick the hero wires use: pathLength="1" lets
   the dash be written as a fraction of the path, whatever its length. */
.art__flow {
  fill: none;
  stroke: var(--signal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .06 .94;
  stroke-dashoffset: 1;
  animation: wire-flow 3.4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(var(--signal-rgb), .75));
}
.art__flow--back {
  stroke: var(--violet);
  animation-delay: 1.7s;
  filter: drop-shadow(0 0 5px rgba(var(--violet-rgb), .75));
}

/* ---- layers ---- */
.art__slab polygon {
  fill: var(--art-fill);
  stroke: var(--art-line);
  stroke-width: 2;
  opacity: .7;
  animation: art-slab 4.8s ease-in-out infinite;
}
.art__slab text {
  font-family: var(--font-display); font-weight: 500; font-size: 19px;
  fill: var(--on-shell); text-anchor: start;
}
.art__slab--2 polygon { animation-delay: -1.2s; }
.art__slab--3 polygon { animation-delay: -2.4s; }
.art__slab--4 polygon { animation-delay: -3.6s; }
@keyframes art-slab {
  0%, 100% { opacity: .6; stroke: var(--art-line); }
  50%      { opacity: 1;  stroke: var(--art-line-hi); }
}

/* ---- signal ---- */
.art__core { fill: var(--core); }
.art__core-label {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  fill: var(--on-accent); text-anchor: middle; letter-spacing: -0.02em;
}
.art__ripple {
  fill: none; stroke: var(--signal); stroke-width: 1.5;
  transform-origin: 772px 110px; transform-box: view-box;
  animation: core-ripple 4s ease-out infinite;
}
.art__ripple--2 { animation-delay: 2s; }

/* ---- team: ten plates, lighting in turn ---- */
.team__plate {
  fill: var(--art-fill);
  stroke: var(--art-line);
  stroke-width: 2;
  animation: art-slab 6s ease-in-out infinite;
}
.team__head, .team__body { fill: var(--core-soft); opacity: .8; }
.art--team .team__one { animation: art-shimmer 6s ease-in-out infinite; }
.art--team .team__one--1, .art--team .team__one--1 .team__plate { animation-delay: -0.00s; }
.art--team .team__one--2, .art--team .team__one--2 .team__plate { animation-delay: -0.60s; }
.art--team .team__one--3, .art--team .team__one--3 .team__plate { animation-delay: -1.20s; }
.art--team .team__one--4, .art--team .team__one--4 .team__plate { animation-delay: -1.80s; }
.art--team .team__one--5, .art--team .team__one--5 .team__plate { animation-delay: -2.40s; }
.art--team .team__one--6, .art--team .team__one--6 .team__plate { animation-delay: -3.00s; }
.art--team .team__one--7, .art--team .team__one--7 .team__plate { animation-delay: -3.60s; }
.art--team .team__one--8, .art--team .team__one--8 .team__plate { animation-delay: -4.20s; }
.art--team .team__one--9, .art--team .team__one--9 .team__plate { animation-delay: -4.80s; }
.art--team .team__one--10, .art--team .team__one--10 .team__plate { animation-delay: -5.40s; }

@media (max-width: 600px) {
  .art { margin: 26px 0 2px; }
  .art__slab text { font-size: 22px; }
}

/* ============================================================
   9. Process — a real sequence, so it is a numbered timeline
   ============================================================ */
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px;
  width: 2px; background: var(--grad-brand-v);
}
.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 22px; padding: 0 0 32px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step__n {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid transparent; color: var(--link);
  background-image: linear-gradient(var(--panel), var(--panel)), var(--grad-brand);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin: 8px 0 .3em; }
.step p { margin: 0; color: var(--ink-soft); }

/* ============================================================
   10. Work
   ============================================================ */
.work { display: grid; gap: 18px; }
.work__item {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: clamp(22px, 3vw, 30px);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.work__item::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-brand-v);
}
.work__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--core-tint);
}
.work__item h3 { margin: 0 0 .35em; }
.work__meta {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 500;
  color: var(--link); background: var(--core-tint);
  display: inline-block; border-radius: 4px; padding: 3px 9px; margin: 0 0 .8em;
}
.work__item p { margin: 0; color: var(--ink-soft); }

/* ============================================================
   11. Contact
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid h2 { font-size: clamp(1.7rem, 2.5vw, 2.2rem); max-width: 18ch; }

.contact-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.contact-facts li { display: grid; gap: 2px; }
.contact-facts .label { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-faint); }
.contact-facts .value {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.contact-facts a.value:hover { color: var(--link); }

.form-card {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-lg);
}
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; color: var(--ink); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--panel-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 13px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--core); outline: none;
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--core-tint);
}
.field textarea { min-height: 130px; resize: vertical; }
.field--pot { position: absolute; left: -9999px; }
.form-note { font-size: var(--step--1); color: var(--ink-faint); margin: 12px 0 0; }

.notice { border-radius: var(--radius); padding: 13px 15px; margin-bottom: 18px; font-size: 1rem; border: 1px solid; }
.notice--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.notice--bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }

/* ============================================================
   12. Blog & pages
   ============================================================ */
.page-head { padding-top: clamp(44px, 6vw, 80px); }
.page-head h1 { margin-bottom: .25em; }
.page-head p { color: var(--ink-soft); font-size: var(--step-1); }

.entry { max-width: 74ch; }
.entry h2, .entry h3 { margin-top: 1.6em; }
.entry img { border-radius: var(--radius); margin: 1.4em 0; }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry li { margin-bottom: .4em; }
.entry blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--core); color: var(--ink-soft); font-style: italic;
}
.entry pre {
  background: var(--panel-sunk); color: var(--on-shell);
  border: 1px solid var(--rule);
  padding: 16px; border-radius: var(--radius); overflow-x: auto; font-size: var(--step--1);
}
.entry code { font-size: .93em; background: var(--core-tint); padding: 2px 5px; border-radius: 3px; }
.entry pre code { background: transparent; padding: 0; }
.entry table { width: 100%; border-collapse: collapse; }
.entry th, .entry td { border: 1px solid var(--rule); padding: 9px 11px; text-align: left; }

.post-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.post-card {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--gap); padding: 30px 0; border-bottom: 1px solid var(--rule);
}
.post-card__date { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-faint); }
.post-card h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin: 0 0 .35em; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--link); }
.post-card p { margin: 0; color: var(--ink-soft); }
.post-card__thumb { grid-column: 1 / -1; margin-bottom: 6px; }
.post-card__thumb img { border-radius: var(--radius); }
@media (max-width: 760px) { .post-card { grid-template-columns: 1fr; gap: 8px; } }

.entry-meta { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-faint); margin-bottom: 1.6em; }

.pagination { margin-top: 36px; font-family: var(--font-display); }
.pagination .page-numbers {
  display: inline-block; padding: 8px 14px; margin-right: 5px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
}
.pagination .current { background-color: var(--core); background-image: var(--grad-btn); border-color: transparent; color: var(--on-accent); }

.post-nav {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--font-display);
}

.search-form { display: flex; gap: 8px; max-width: 460px; }
.search-form input[type="search"] {
  flex: 1; font-family: var(--font-body); font-size: 1rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 13px; background: var(--panel);
}

.alignwide { width: min(100%, 1100px); }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: .4em 1.4em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.4em; }
.wp-caption-text, .wp-element-caption { font-size: var(--step--1); color: var(--ink-faint); }
.sticky .post-card h2::after { content: " — pinned"; color: var(--link); font-size: .8em; }

/* ============================================================
   13. CTA band + footer
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--shell) 0%, var(--shell-2) 52%, var(--shell-3) 100%);
  color: var(--on-shell);
  padding-block: clamp(50px, 7vw, 88px);
}
.cta-band::before {
  content: ""; position: absolute; right: -6%; top: -60%;
  width: 620px; height: 620px; max-width: 80vw;
  background: radial-gradient(circle, rgba(var(--signal-rgb), .28), transparent 65%);
  pointer-events: none;
}
.cta-band h2 { color: var(--on-shell-strong); max-width: 22ch; }
.cta-band p { color: var(--on-shell-soft); max-width: 56ch; font-size: var(--step-1); }
.cta-band__inner {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); align-items: center;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } }

.site-footer {
  background: var(--shell); color: var(--on-shell-soft);
  padding-block: clamp(40px, 5vw, 62px); font-size: .98rem;
}
.site-footer a { color: var(--on-shell); text-decoration: none; }
.site-footer a:hover { color: var(--on-shell-strong); text-decoration: underline; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 32px var(--gap);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
.footer-grid h2 { font-size: 1rem; font-weight: 600; color: var(--on-shell-strong); margin: 0 0 .9em; letter-spacing: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-brand {
  color: var(--on-shell-strong); font-family: var(--font-display); font-weight: 700;
  font-size: 1.14rem; margin-bottom: .5em; display: block;
}
.footer-bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-dark-strong);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: var(--step--1);
}
.social { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }

/* ============================================================
   14. Scope estimator
   ============================================================ */
.est__intro { color: var(--ink-soft); max-width: 62ch; }

.est__set { border: 0; padding: 0; margin: 28px 0 0; min-width: 0; }
.est__set legend {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--ink); padding: 0; margin-bottom: 14px;
}

.est__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }

.est__chip { display: block; cursor: pointer; }
.est__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.est__chip-body {
  display: grid; gap: 4px; align-content: start;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 15px 16px 15px 44px;
  position: relative;
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.est__chip-body::before {
  content: ""; position: absolute; left: 15px; top: 17px;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--rule); background: var(--panel);
  transition: background-color .15s ease, border-color .15s ease;
}
.est__chip-body::after {
  content: ""; position: absolute; left: 21px; top: 21px;
  width: 5px; height: 10px; border: solid var(--on-accent);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
  opacity: 0; transition: opacity .15s ease;
}
.est__chip-body b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.est__chip-body span { color: var(--ink-soft); font-size: .97rem; line-height: 1.5; }
.est__chip:hover .est__chip-body { border-color: var(--core-soft); }
.est__chip input:checked + .est__chip-body {
  border-color: var(--core); background: var(--core-wash);
  box-shadow: 0 0 0 3px var(--core-tint);
}
.est__chip input:checked + .est__chip-body::before { background: var(--core); border-color: var(--core); }
.est__chip input:checked + .est__chip-body::after { opacity: 1; }
.est__chip input:focus-visible + .est__chip-body { outline: 3px solid var(--core-soft); outline-offset: 2px; }

.est__scale { display: flex; flex-wrap: wrap; gap: 9px; }
.est__pill { cursor: pointer; }
.est__pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.est__pill span {
  display: inline-block;
  font-family: var(--font-display); font-size: .97rem; font-weight: 500;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 10px 18px;
  transition: all .15s ease;
}
.est__pill:hover span { border-color: var(--core-soft); }
.est__pill input:checked + span { background-color: var(--core); background-image: var(--grad-btn); border-color: transparent; color: var(--on-accent); }
.est__pill input:focus-visible + span { outline: 3px solid var(--core-soft); outline-offset: 2px; }

.est__panel {
  margin-top: 28px;
  background: linear-gradient(135deg, var(--shell) 0%, var(--shell-2) 100%);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  color: var(--on-shell);
  position: relative; overflow: hidden;
}
.est__panel::before {
  content: ""; position: absolute; right: -40px; top: -90px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(var(--core-rgb), .38), transparent 68%);
  pointer-events: none;
}
.est__figures { position: relative; display: flex; flex-wrap: wrap; gap: 14px 48px; }
.est__figure { display: grid; gap: 2px; }
.est__label { font-family: var(--font-display); font-size: var(--step--1); color: var(--on-shell-soft); }
.est__figures b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  color: var(--on-shell-strong); letter-spacing: -0.025em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.est__readout {
  position: relative; margin: 16px 0 0;
  color: var(--on-shell-soft); font-size: 1rem; max-width: 62ch;
}
.est__actions { position: relative; margin-top: 20px; }
.est__send:disabled {
  background: var(--line-dark); border-color: var(--line-dark-strong);
  color: var(--on-shell-soft); box-shadow: none; cursor: not-allowed; transform: none;
}
.est__note { position: relative; margin: 16px 0 0; font-size: var(--step--1); color: var(--on-shell-soft); opacity: .85; }