/* =====================================================================
   NEURA — core stylesheet
   Tokens are all overridable from Neura Site Manager (inline :root block
   is printed after this file). Never hard-code a colour below the
   token block.
   ===================================================================== */

/* ---------------------------------------------------------------
   0. LOCAL WEBFONTS
   ---------------------------------------------------------------
   Degular Display Demo, bundled in assets/fonts/. Two faces only:
   Regular and a true Italic — which is what the hero's oblique word uses,
   rather than a synthesised slant.

   The demo files carry 66 glyphs (A-Z a-z 0-9 space comma full stop). Anything
   else — an apostrophe, a hyphen, an accent — falls through to the next family
   in the stack per character, so the fallback is named explicitly everywhere
   this family is used rather than left to the browser default.

   See assets/fonts/README.txt for the licence. The demo licence covers testing
   only, not a public site.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Degular Display Demo';
  src: url('../fonts/DegularDisplayDemo-Regular.woff2') format('woff2'),
       url('../fonts/DegularDisplayDemo-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Degular Display Demo';
  src: url('../fonts/DegularDisplayDemo-Italic.woff2') format('woff2'),
       url('../fonts/DegularDisplayDemo-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* ink layers */
  --bg: #070708;
  --bg-2: #0b0b0d;
  --bg-3: #101014;
  --surface: #16161b;

  /* text (rgb triplet lets us build alpha ramps from one setting) */
  --tx-rgb: 244, 244, 239;
  --tx: rgb(var(--tx-rgb));
  --tx-2: rgba(var(--tx-rgb), .56);
  --tx-3: rgba(var(--tx-rgb), .32);

  /* accents */
  --ac-rgb: 232, 255, 71;
  --ac: rgb(var(--ac-rgb));
  --ac-2-rgb: 111, 125, 255;
  --ac-2: rgb(var(--ac-2-rgb));
  --ac-ink: #0a0a05;
  --ac-soft: rgba(var(--ac-rgb), .09);
  --ac-line: rgba(var(--ac-rgb), .26);
  --ac-glow: rgba(var(--ac-rgb), .34);

  /* surfaces + lines */
  --glass: rgba(var(--tx-rgb), .035);
  --glass-2: rgba(var(--tx-rgb), .06);
  --line: rgba(var(--tx-rgb), .075);
  --line-2: rgba(var(--tx-rgb), .17);
  --blur: 20px;

  /* type */
  --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xs: .765rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-md: clamp(1.02rem, .97rem + .22vw, 1.15rem);
  --t-lg: clamp(1.22rem, 1.1rem + .6vw, 1.6rem);
  --t-xl: clamp(1.6rem, 1.35rem + 1.25vw, 2.35rem);
  --t-2xl: clamp(2.1rem, 1.45rem + 3.1vw, 4.05rem);
  --t-3xl: clamp(2.9rem, 1.5rem + 6.6vw, 7.4rem);

  /* space */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1320px;
  --section-y: clamp(5.5rem, 11vw, 10rem);

  /* radii */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 100px;

  /* motion */
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-io: cubic-bezier(.77, 0, .175, 1);
  --e-drawer: cubic-bezier(.32, .72, 0, 1);
  --d-fast: 140ms;
  --d: 200ms;
  --d-slow: 320ms;

  /* Fallback only — neura-core.js measures the real header and overwrites
     this, because the header shrinks when it sticks and every anchor offset,
     sticky aside and the hero's top inset are calculated from it. */
  --header-h: 84px;
}

/* Radius presets driven by Site Manager (button/border style) */
:root[data-radius="sharp"]  { --r-sm: 0; --r: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0; }
:root[data-radius="soft"]   { --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; }
:root[data-radius="round"]  { --r-sm: 12px; --r: 18px; --r-lg: 28px; --r-xl: 38px; }

/* ---------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
html.neura-smooth { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.neura-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
::selection { background: var(--ac); color: var(--ac-ink); }

/* Spam honeypot.
   This lives in the core stylesheet, not in neura-inner.css, because the
   newsletter form renders on the homepage and neura-inner.css deliberately
   does not load there — which left the trap visible. A honeypot that depends
   on a conditionally-loaded stylesheet is a honeypot that will eventually be
   seen by a real visitor. The inline style on the element is the same rule
   again, so it survives even total CSS failure. */

/* Notices can surface anywhere the newsletter or contact form does, including
   the homepage, so they belong in the always-loaded sheet rather than in
   neura-inner.css. */
.notice {
  padding: 1.1rem 1.35rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  display: flex; gap: .8rem; align-items: flex-start;
  line-height: 1.6;
}
.notice svg { flex: none; margin-top: .2rem; }
.notice--ok { border-color: var(--ac-line); background: var(--ac-soft); color: var(--tx); }
.notice--err { border-color: rgba(255, 139, 122, .35); background: rgba(255, 139, 122, .07); color: #ffb3a7; }
.notice--info { background: var(--glass); color: var(--tx-2); }

.neura-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Focus — never removed, only shaped. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 3px;
  border-radius: 3px;
}

.neura-skip {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100000;
  padding: .75rem 1.4rem;
  background: var(--ac); color: var(--ac-ink);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm);
  border-radius: 0 0 var(--r) var(--r);
  transition: transform var(--d) var(--e-out);
}
.neura-skip:focus-visible { transform: translate(-50%, 0); }

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

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ac); border-radius: 2px; }

/* ---------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--bg-2); }
.section--edged { border-block: 1px solid var(--line); }

.stack > * + * { margin-top: var(--stack, 1rem); }

/* ---------------------------------------------------------------
   4. TYPE UTILITIES
   --------------------------------------------------------------- */
.d-xl, .d-lg, .d-md {
  font-family: var(--f-display);
  letter-spacing: -.03em;
  font-weight: 800;
  text-wrap: balance;
}
.d-xl { font-size: var(--t-3xl); line-height: .93; }
.d-lg { font-size: var(--t-2xl); line-height: 1; font-weight: 700; letter-spacing: -.028em; }
.d-md { font-size: var(--t-xl); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }

.eyebrow {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ac);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .6;
}

.lede { color: var(--tx-2); line-height: 1.72; max-width: 46ch; }
.muted { color: var(--tx-2); }
.accent { color: var(--ac); }

/* ---------------------------------------------------------------
   5. BUTTONS + LINKS
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: -.01em;
  line-height: 1;
  min-height: 48px;
  border: 1px solid transparent;
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d) var(--e-out),
              background-color var(--d) ease,
              border-color var(--d) ease,
              color var(--d) ease;
  will-change: transform;
}
.btn:active { transform: translateY(0) scale(.975); transition-duration: 100ms; }

.btn--primary { background: var(--ac); color: var(--ac-ink); }
.btn--ghost { background: var(--glass); color: var(--tx); border-color: var(--line-2); }
.btn--bare { padding-inline: .25rem; background: none; color: var(--tx-2); font-weight: 600; }
.btn--sm { padding: .62rem 1.15rem; min-height: 40px; font-size: var(--t-xs); }
.btn--lg { padding: 1.2rem 2.3rem; font-size: var(--t-md); }

.btn .arw {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .45;
  flex: none;
  transition: transform var(--d) var(--e-out), opacity var(--d) ease;
}
.btn--primary .arw { border-color: rgba(0, 0, 0, .35); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--tx-2);
  padding-block: .35rem;
  transition: color var(--d) ease;
}
.link-arrow svg { transition: transform var(--d) var(--e-out); flex: none; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px var(--ac-glow); }
  .btn--ghost:hover { background: var(--glass-2); border-color: var(--tx-3); transform: translateY(-2px); }
  .btn--bare:hover { color: var(--tx); }
  .btn:hover .arw { transform: translate(3px, -3px); opacity: 1; }
  .link-arrow:hover { color: var(--ac); }
  .link-arrow:hover svg { transform: translate(3px, -3px); }
}

/* underline sweep for inline nav links */
.ul-sweep { position: relative; }
.ul-sweep::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--ac);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .ul-sweep:hover::after { transform: scaleX(1); transform-origin: left; }
}
.ul-sweep[aria-current="page"]::after,
.ul-sweep.is-current::after { transform: scaleX(1); }

/* ---------------------------------------------------------------
   6. CHROME: noise, page transition, cursor
   --------------------------------------------------------------- */
.neura-grain {
  position: fixed; inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: .022;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.neura-curtain {
  position: fixed; inset: 0;
  z-index: 9995;
  background: var(--bg);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  display: grid;
  place-items: center;
}
.neura-curtain__mark {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.03em;
  opacity: 0;
}

#neura-cursor-dot,
#neura-cursor-ring {
  position: fixed; top: 0; left: 0;
  z-index: 99999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}
#neura-cursor-dot {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--ac);
  transition: opacity var(--d) ease;
}
#neura-cursor-ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid rgba(var(--tx-rgb), .34);
  transition: width var(--d-slow) var(--e-out), height var(--d-slow) var(--e-out),
              margin var(--d-slow) var(--e-out), border-color var(--d) ease,
              background-color var(--d) ease, opacity var(--d) ease;
}
body.neura-cursor-ready #neura-cursor-dot,
body.neura-cursor-ready #neura-cursor-ring { opacity: 1; }
#neura-cursor-ring.is-hot {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: rgba(var(--ac-rgb), .7);
  background: rgba(var(--ac-rgb), .06);
}
#neura-cursor-ring.is-down { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
body.neura-has-cursor,
body.neura-has-cursor a,
body.neura-has-cursor button,
body.neura-has-cursor .card { cursor: none; }
body.neura-has-cursor input,
body.neura-has-cursor textarea,
body.neura-has-cursor select { cursor: auto; }

/* ---------------------------------------------------------------
   7. HEADER / NAV
   --------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto;
  z-index: 1000;
  padding-block: 1.5rem;
  transition: padding var(--d-slow) var(--e-out);
}
.site-header.is-static { position: absolute; }
.site-header.is-stuck { padding-block: .75rem; }

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .5rem .5rem .5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color var(--d-slow) ease, border-color var(--d-slow) ease,
              backdrop-filter var(--d-slow) ease, box-shadow var(--d-slow) ease;
}
.site-header.is-stuck .nav-shell {
  background: rgba(7, 7, 8, .62);
  border-color: var(--line);
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  backdrop-filter: blur(var(--blur)) saturate(160%);
}

.brand {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font-family: var(--f-display);
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.035em;
  line-height: 1;
  flex: none;
}
.brand__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); flex: none; }
.brand__img { max-height: 34px; width: auto; }

.nav-primary ul { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.4rem); }
.nav-primary a {
  font-size: var(--t-sm); font-weight: 500;
  color: var(--tx-2);
  transition: color var(--d) ease;
  padding-block: .35rem;
  display: inline-block;
}
.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a { color: var(--tx); }
@media (hover: hover) and (pointer: fine) { .nav-primary a:hover { color: var(--tx); } }

.nav-actions { display: flex; align-items: center; gap: .75rem; flex: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass);
  place-items: center;
  flex: none;
}
.burger__bars { display: block; width: 18px; height: 10px; position: relative; }
.burger__bars i {
  position: absolute; left: 0; height: 1.5px; width: 100%;
  background: var(--tx); border-radius: 2px;
  transition: transform var(--d-slow) var(--e-out), opacity var(--d-fast) ease;
}
.burger__bars i:nth-child(1) { top: 0; }
.burger__bars i:nth-child(2) { top: 8.5px; width: 70%; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); width: 100%; }

/* mobile drawer */
.nav-drawer {
  position: fixed; inset: 0;
  z-index: 1200;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 6.5rem var(--gutter) 2.5rem;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition: opacity var(--d-slow) var(--e-drawer),
              transform var(--d-slow) var(--e-drawer),
              visibility 0s linear var(--d-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-drawer.is-open {
  visibility: visible; opacity: 1; transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.nav-drawer__glow {
  position: absolute; inset: auto -20% -30% -20%;
  height: 55vh;
  background: radial-gradient(ellipse at 50% 100%, rgba(var(--ac-rgb), .1), transparent 68%);
  pointer-events: none;
}
.nav-drawer__list { display: flex; flex-direction: column; gap: .25rem; position: relative; }
.nav-drawer__list li { overflow: hidden; }
.nav-drawer__list a {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.24;
  padding-block: .1rem;
  transform: translateY(105%);
}
.nav-drawer.is-open .nav-drawer__list a {
  transform: translateY(0);
  transition: transform 460ms var(--e-drawer) var(--delay, 0ms);
}
.nav-drawer__list .current-menu-item > a { color: var(--ac); }
.nav-drawer__foot {
  margin-top: auto; padding-top: 2.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  position: relative;
}
.nav-drawer__foot a.contact { color: var(--tx-2); font-size: var(--t-sm); }

@media (max-width: 900px) {
  .nav-primary, .nav-actions .btn { display: none; }
  .burger { display: grid; }
  .nav-shell { padding-left: 1rem; }
}

/* ---------------------------------------------------------------
   8. HERO — layered editorial composition
   ---------------------------------------------------------------
   Five stacked layers, back to front:
     -3  canvas ....... the particle network
     -2  aurora ....... one soft accent bloom
     -1  grid + veil .. hairline rhythm, then a fade into the page
      1  content ...... badge, headline, sub, CTAs
      2  float ........ glass detail cards
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4.5rem));
  padding-bottom: clamp(5rem, 10vh, 7.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* A canvas is a replaced element with an intrinsic 300x150 box. `inset: 0`
   alone cannot stretch it — the intrinsic size wins and the right/bottom
   offsets are dropped, leaving a small canvas pinned to the corner. The
   explicit width/height is what makes it fill the hero. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -3;
}

.hero__aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 90%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(48rem 34rem at 76% 18%, rgba(var(--ac-rgb), .10), transparent 68%),
    radial-gradient(38rem 30rem at 12% 6%, rgba(var(--ac-2-rgb), .07), transparent 70%);
  filter: blur(6px);
  animation: neura-aurora 22s var(--e-io) infinite alternate;
}
@keyframes neura-aurora {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 52%, rgba(7, 7, 8, .82) 86%, var(--bg) 100%);
}

/* hairline grid — structure, not decoration: it anchors the type baseline */
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(var(--tx-rgb), .035) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent 96%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.hero__lead { min-width: 0; }

/* ------------------------------------------------------------ badge */
.badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem .5rem .8rem;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: var(--t-xs);
  color: var(--tx-2);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 0 var(--ac-glow);
  animation: neura-pulse 2.4s var(--e-io) infinite;
  flex: none;
}
@keyframes neura-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--ac-rgb), .5); }
  55%      { opacity: .45; box-shadow: 0 0 0 6px rgba(var(--ac-rgb), 0); }
}

/* ---------------------------------------------------------- headline */
/* Every value here is overridable from Neura Site Manager → Hero →
   Typography. The fallback in each var() is the theme's own default, so an
   untouched site emits no inline CSS at all and a cleared field returns here
   rather than to nothing. */
/* Scoped to .hero for specificity. `.d-xl` also sets a weight, and relying on
   source order alone meant any later stylesheet — a child theme, a plugin —
   could silently outrank the hero typography settings. */
.hero .hero__title {
  /* Set at a regular weight rather than extrabold: at this size 400 reads as
     confident restraint, and it lets the single oblique word carry the
     emphasis instead of fighting a heavy face. Lighter weights need looser
     tracking and leading than bold ones — -.022em and 1.0 rather than the
     -.035em/.95 an extrabold wanted — and a wider measure, because Inter at
     400 sets narrower per character. */
  max-width: 20ch;
  font-family: var(--hero-font, var(--f-display)), var(--f-display);
  /* Sized so four lines plus the sub and CTAs still clear a 100svh viewport;
     the vh term is what keeps the headline from pushing the buttons off a
     short laptop screen. The scale multiplies that whole curve, so a resized
     headline stays responsive instead of becoming a fixed size. */
  font-size: calc(clamp(2.9rem, min(8.4vw, 10.2vh), 8rem) * var(--hero-scale, 1));
  line-height: var(--hero-leading, 1);
  letter-spacing: var(--hero-track, -.022em);
  font-weight: var(--hero-weight, 400);
}

/* ------------------------------------------------- centred variant */
.hero--center .hero__layout {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.hero--center .hero__title { max-width: 20ch; }
.hero--center .hero__sub { margin-inline: auto; }
.hero--center .hero__ctas { justify-content: center; }
.hero--center .hero__float {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
/* The drift reads as jitter once the cards sit in a tight row. */
.hero--center .fcard { animation: none; }
.hero--center .hero__foot { justify-content: center; }
.hero--center .hero__meta { display: none; }
.hero__line { overflow: hidden; display: block; padding-bottom: .06em; }
.hero__word { display: inline-block; will-change: transform; }
.js-anim .hero__word { transform: translateY(108%); }
.hero__word.accent {
  color: var(--ac);
  text-shadow: 0 0 42px rgba(var(--ac-rgb), .28);
}

/* A single oblique word carries the editorial contrast against the regular
   weight around it.
   `oblique 10deg` is used rather than `italic` on purpose: the font request
   asks for upright weights only, so a family without a loaded italic would be
   synthesised at whatever slant the browser felt like — and asking Google for
   italics would 400 the entire stylesheet for any family that ships none
   (Anton, for one). A fixed angle is identical in every family and cannot
   break the font request. The `italic` line above it is the fallback for
   browsers that do not accept an angle. */
.hero__word.oblique {
  /* Explicit because a reset or a browser default that disables synthesis
     would otherwise leave the word upright with no indication why. */
  font-synthesis: style;
  -webkit-font-synthesis: style;
  /* Plain `italic`, not `oblique <angle>`. The headline family ships a real
     Italic face and `italic` is what selects it; an explicit angle invites the
     browser to slant the upright face instead, which throws away the drawn
     italic. Families without an italic still get a synthesised one here. */
  font-style: italic;
  /* The slant pushes the glyphs right; a hair of extra space keeps the word
     from crowding the one after it. */
  padding-right: .06em;
}

.hero__sub {
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
  max-width: 44ch;
  font-family: var(--hero-sub-font, var(--f-body));
  font-size: calc(var(--t-md) * var(--hero-sub-scale, 1));
  color: var(--tx-2);
}

.hero__ctas {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ------------------------------------------- floating glass details */
.hero__float {
  display: grid;
  gap: .875rem;
  width: clamp(13rem, 17vw, 16.5rem);
}

.fcard {
  position: relative;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
  /* Each card drifts on its own offset so the group never pulses in unison. */
  animation: neura-float 9s var(--e-io) infinite alternate;
  animation-delay: calc(var(--i, 0) * -2.6s);
}
.fcard::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(var(--ac-rgb), .32), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .8;
  pointer-events: none;
}
@keyframes neura-float {
  from { transform: translate3d(0, 5px, 0); }
  to   { transform: translate3d(0, -7px, 0); }
}

.fcard b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: var(--tx);
}
.fcard b em { font-style: normal; color: var(--ac); }

/* The number itself is a <span> inside the <b>, and the label is a <span>
   beside it. A bare `.fcard span` matches both, so the number has to be
   pinned back to the <b>'s own styling and the label scoped to a direct
   child — otherwise the number renders at label size and the suffix is
   pushed onto its own line. */
.fcard b span {
  display: inline;
  font: inherit;
  color: inherit;
  margin: 0;
}

.fcard > span {
  display: block;
  font-size: var(--t-xs);
  color: var(--tx-3);
  margin-top: .45rem;
  line-height: 1.4;
}

/* ------------------------------------------------ scroll indicator */
.hero__foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.hero__scroll {
  display: inline-flex; align-items: center; gap: .8rem;
  color: var(--tx-3); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase;
}
.hero__scroll i {
  display: block; width: 46px; height: 1px;
  background: var(--line-2); position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ac);
  transform: translateX(-100%);
  animation: neura-sweep 2.2s var(--e-io) infinite;
}
@keyframes neura-sweep { to { transform: translateX(100%); } }

.hero__meta {
  display: flex; align-items: center; gap: 1.25rem;
  font-size: var(--t-xs); color: var(--tx-3); letter-spacing: .04em;
}
.hero__meta span { white-space: nowrap; }

/* ------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .hero__float { width: clamp(11rem, 22vw, 14rem); }
  .fcard { padding: .9rem 1rem; }
}

@media (max-width: 900px) {
  .hero { justify-content: flex-end; }
  .hero__layout { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  /* Keeps the scale multiplier, which the desktop rule applies too — dropping
     it here would make a resized headline snap back to default on a phone.
     Tracking opens up slightly because a regular weight at small display sizes
     needs less negative space than it does at 8rem. */
  .hero .hero__title {
    max-width: 100%;
    font-size: calc(clamp(2.6rem, 11vw, 5rem) * var(--hero-scale, 1));
    letter-spacing: var(--hero-track, -.018em);
  }
  .hero__float {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .75rem;
  }
  /* Drifting cards read as jitter once they are in a tight row. */
  .fcard { animation: none; }
  .hero__meta { display: none; }
}

@media (max-width: 560px) {
  .hero__float { grid-template-columns: 1fr 1fr; }
  .fcard b { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------
   8b. INNER PAGE HERO
   ---------------------------------------------------------------
   Lives here rather than in neura-portfolio.css because every inner page
   uses it — Services, About, Contact, blog posts, search, 404. That sheet
   only loads on portfolio screens, so the padding that clears the fixed
   header was missing everywhere else and the breadcrumb rendered on top of
   the logo.
   --------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 8rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__glow {
  position: absolute; inset: -30% -10% auto -10%; height: 46rem; z-index: -1;
  background: radial-gradient(ellipse at 68% 45%, rgba(var(--ac-rgb), .07), transparent 62%);
  pointer-events: none;
}
.page-hero h1 { margin-top: 1.15rem; max-width: 16ch; }
.page-hero__sub { margin-top: 1.5rem; font-size: var(--t-md); }

.crumbs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--t-xs); color: var(--tx-3); }
.crumbs a { transition: color var(--d) ease; }
.crumbs a:hover { color: var(--ac); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ---------------------------------------------------------------
   9. CLIENT MARQUEE
   --------------------------------------------------------------- */
.clients { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.clients__label {
  text-align: center; font-size: var(--t-xs); letter-spacing: .11em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: 1.75rem;
}
.marquee {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
  width: max-content; flex: none;
  animation: neura-marquee var(--marquee-speed, 34s) linear infinite;
}
@keyframes neura-marquee { to { transform: translate3d(-50%, 0, 0); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
.client {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-size: 1rem; font-weight: 700;
  letter-spacing: .03em; white-space: nowrap;
  color: var(--tx-3);
  transition: color var(--d) ease, opacity var(--d) ease;
}
.client img { max-height: 26px; width: auto; opacity: .45; filter: grayscale(1) brightness(2.2); transition: opacity var(--d) ease, filter var(--d) ease; }
@media (hover: hover) and (pointer: fine) {
  .client:hover { color: var(--tx); }
  .client:hover img { opacity: 1; filter: grayscale(0) brightness(1); }
}
.client__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); flex: none; }

/* ---------------------------------------------------------------
   10. SECTION HEADERS
   --------------------------------------------------------------- */
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-head__text { max-width: 34ch; }
.sec-head__text h2 { margin-top: 1rem; }
.sec-head__text p { margin-top: 1.15rem; }
.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.sec-head--center .sec-head__text { max-width: 30ch; }
.sec-head--center .lede { margin-inline: auto; }

/* ---------------------------------------------------------------
   11. CARD BASE (shared glass treatment + cursor spotlight)
   --------------------------------------------------------------- */
.card {
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  isolation: isolate;
  transition: border-color var(--d) ease, transform var(--d) var(--e-out), background-color var(--d) ease;
}
/* pointer-tracked spotlight; --mx/--my set on the element itself */
.card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(24rem 24rem at var(--mx, 50%) var(--my, 0%), rgba(var(--ac-rgb), .075), transparent 62%);
  opacity: 0;
  transition: opacity var(--d-slow) ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--line-2); }
  .card:hover::before { opacity: 1; }
}

.chip {
  display: inline-flex; align-items: center;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  color: var(--tx-3);
  transition: border-color var(--d) ease, color var(--d) ease;
  white-space: nowrap;
}
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------------------------------------------------------------
   12. SERVICES (bento)
   --------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.svc {
  background: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.15rem;
  min-height: 270px;
  position: relative;
  isolation: isolate;
  transition: background-color var(--d-slow) ease;
}
.svc::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%), var(--ac-soft), transparent 65%);
  opacity: 0; transition: opacity var(--d-slow) ease;
}
.svc--lead { grid-column: span 2; }
.svc__n { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; color: var(--tx-3); }
.svc__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--tx-2);
  transition: border-color var(--d) ease, background-color var(--d) ease, color var(--d) ease;
}
.svc__icon img { width: 24px; height: 24px; object-fit: contain; }
.svc__icon svg { stroke: currentColor; }
.svc__title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
.svc--lead .svc__title { font-size: var(--t-xl); }
.svc__desc { font-size: var(--t-sm); color: var(--tx-2); line-height: 1.68; flex-grow: 1; max-width: 52ch; }
.svc__tags { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { background: var(--bg-3); }
  .svc:hover::before { opacity: 1; }
  .svc:hover .svc__icon { border-color: var(--ac-line); background: var(--ac-soft); color: var(--ac); }
  .svc:hover .chip { border-color: var(--ac-line); color: var(--tx-2); }
}
.svc__link { position: absolute; inset: 0; z-index: 2; }
.svc__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------------------------------------------------------------
   13. PROJECTS
   --------------------------------------------------------------- */
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.proj { grid-column: span 1; }
.proj--wide { grid-column: span 2; }

.proj__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.proj--wide .proj__media { aspect-ratio: 21 / 9; }
.proj__media img,
.proj__media video,
.proj__ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 640ms var(--e-out), filter var(--d-slow) ease;
  will-change: transform;
}
.proj__ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--bg-3), var(--surface)); }
.proj__ph svg { opacity: .22; width: 72px; height: 72px; }
.proj__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .1) 52%, transparent 78%);
  opacity: 0;
  display: flex; align-items: flex-end;
  padding: clamp(1rem, 2vw, 1.6rem);
  transition: opacity var(--d-slow) ease;
}
.proj__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem;
  background: var(--ac); color: var(--ac-ink);
  border-radius: var(--r-sm);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-xs);
  transform: translateY(10px);
  transition: transform var(--d-slow) var(--e-out);
}
.proj__body { padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 2.4vw, 2rem); }
.proj__cat { font-size: var(--t-xs); font-weight: 600; color: var(--ac); letter-spacing: .1em; text-transform: uppercase; }
.proj__title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; margin-top: .5rem; }
.proj--wide .proj__title { font-size: var(--t-xl); }
.proj__meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.proj__year { font-size: var(--t-xs); color: var(--tx-3); font-variant-numeric: tabular-nums; }
.proj__link { position: absolute; inset: 0; z-index: 3; }
.proj__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  padding: .3rem .7rem;
  background: rgba(7, 7, 8, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--ac-line);
  border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ac);
}
@media (hover: hover) and (pointer: fine) {
  .proj:hover .proj__media img,
  .proj:hover .proj__media video,
  .proj:hover .proj__ph { transform: scale(1.055); }
  .proj:hover .proj__veil { opacity: 1; }
  .proj:hover .proj__cta { transform: translateY(0); }
}
.proj__quick {
  position: absolute; z-index: 4;
  top: 1rem; right: 1rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(7, 7, 8, .68);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--tx);
  opacity: 0;
  transform: scale(.94);
  transition: opacity var(--d) ease, transform var(--d) var(--e-out), background-color var(--d) ease, color var(--d) ease;
}
.proj:hover .proj__quick,
.proj__quick:focus-visible { opacity: 1; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .proj__quick:hover { background: var(--ac); color: var(--ac-ink); border-color: var(--ac); }
}

/* empty state */
.empty {
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  text-align: center;
  background: var(--glass);
}
.empty h3 { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; }
.empty p { color: var(--tx-2); margin: .75rem auto 0; max-width: 46ch; font-size: var(--t-sm); }
.empty .btn { margin-top: 1.75rem; }

/* ---------------------------------------------------------------
   14. PROCESS
   --------------------------------------------------------------- */
.process__wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.process__aside { position: sticky; top: calc(var(--header-h) + 3rem); }
.process__aside h2 { margin-top: 1rem; }
.process__aside p { margin-top: 1.15rem; }
.process__aside .btn { margin-top: 2.25rem; }
.steps { display: flex; flex-direction: column; }
.step {
  position: relative;
  display: grid; grid-template-columns: 3rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.5rem, 2.5vw, 2rem) 0 clamp(1.5rem, 2.5vw, 2rem) 1.25rem;
  border-bottom: 1px solid var(--line);
}
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: none; padding-bottom: 0; }
.step__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--ac);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--d-slow) var(--e-out);
}
.step__n { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; color: var(--tx-3); padding-top: .3rem; font-variant-numeric: tabular-nums; }
.step__title { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; letter-spacing: -.015em; transition: color var(--d) ease; }
.step__desc { font-size: var(--t-sm); color: var(--tx-2); line-height: 1.68; margin-top: .55rem; max-width: 54ch; }
@media (hover: hover) and (pointer: fine) {
  .step:hover .step__bar { transform: scaleY(1); }
  .step:hover .step__title { color: var(--ac); }
}

/* ---------------------------------------------------------------
   15. STATS
   --------------------------------------------------------------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.stat {
  background: var(--bg-2);
  padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.25rem, 2vw, 2rem);
  text-align: center;
  position: relative;
}
.stat::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  width: 60%; height: 2px; background: var(--ac);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--d-slow) var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .stat:hover::after { transform: translateX(-50%) scaleX(1); } }
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.2vw, 3.9rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1;
  display: flex; align-items: baseline; justify-content: center; gap: .04em;
  font-variant-numeric: tabular-nums;
}
.stat__n em { font-style: normal; font-size: .58em; color: var(--ac); }
.stat__label { font-size: var(--t-sm); color: var(--tx-2); font-weight: 500; margin-top: .75rem; }
.stat__note { font-size: var(--t-xs); color: var(--tx-3); margin-top: .3rem; }

/* ---------------------------------------------------------------
   16. TESTIMONIALS
   --------------------------------------------------------------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.quote {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.4rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.stars { display: flex; gap: 3px; }
.star { width: 13px; height: 13px; background: var(--ac); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star.is-off { background: var(--line-2); }
.quote__text { font-size: var(--t-sm); line-height: 1.78; color: var(--tx-2); flex-grow: 1; }
.quote__by { display: flex; align-items: center; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--f-display); font-weight: 800; font-size: .92rem;
  color: var(--ac-ink);
  background: linear-gradient(135deg, var(--ac), rgba(var(--ac-rgb), .55));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote__name { font-family: var(--f-display); font-weight: 700; font-size: .93rem; }
.quote__role { font-size: var(--t-xs); color: var(--tx-3); margin-top: .1rem; }
@media (hover: hover) and (pointer: fine) { .quote:hover { transform: translateY(-4px); } }

/* ---------------------------------------------------------------
   17. NEWSLETTER
   --------------------------------------------------------------- */
.news {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.news::before {
  content: ''; position: absolute; inset: auto -10% -60% 30%;
  height: 22rem;
  background: radial-gradient(ellipse at center, rgba(var(--ac-rgb), .1), transparent 68%);
  pointer-events: none;
}
.news__text { position: relative; }
.news__text p { margin-top: 1rem; }
.news__form { position: relative; }
.news-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.news-form input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  padding: 1rem 1.15rem;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--tx);
  font-size: var(--t-sm);
  transition: border-color var(--d) ease, background-color var(--d) ease;
}
.news-form input::placeholder { color: var(--tx-3); }
.news-form input:focus { border-color: var(--ac); background: rgba(0, 0, 0, .45); }
.news__note { font-size: var(--t-xs); color: var(--tx-3); margin-top: 1rem; }
.news__msg { margin-top: 1rem; font-size: var(--t-sm); }
.news__msg.is-ok { color: var(--ac); }
.news__msg.is-err { color: #ff8b7a; }

/* ---------------------------------------------------------------
   18. CTA
   --------------------------------------------------------------- */
.cta { text-align: center; position: relative; overflow: hidden; background: var(--bg-2); padding-block: clamp(6rem, 14vw, 11rem); }
.cta__glow {
  position: absolute; top: 50%; left: 50%;
  width: min(46rem, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--ac-rgb), .085) 0%, transparent 66%);
  border-radius: 50%;
  pointer-events: none;
  animation: neura-breathe 6s var(--e-io) infinite;
}
@keyframes neura-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  50%      { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}
.cta__inner { position: relative; z-index: 1; }
.cta h2 { max-width: 14ch; margin: 1.25rem auto 0; }
.cta__sub { margin: 1.5rem auto clamp(2rem, 4vw, 3rem); max-width: 42ch; color: var(--tx-2); }
.btn--glow { animation: neura-halo 3.6s var(--e-io) infinite; }
@keyframes neura-halo {
  0%, 100% { box-shadow: 0 0 36px -6px var(--ac-glow); }
  50%      { box-shadow: 0 0 64px -4px rgba(var(--ac-rgb), .5); }
}
.cta__meta { display: flex; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); }
.cta__meta a, .cta__meta span { display: inline-flex; align-items: center; gap: .55rem; color: var(--tx-3); font-size: var(--t-sm); transition: color var(--d) ease; }
@media (hover: hover) and (pointer: fine) { .cta__meta a:hover { color: var(--ac); } }

/* ---------------------------------------------------------------
   19. FOOTER
   --------------------------------------------------------------- */
.site-footer { padding: clamp(3.5rem, 7vw, 6rem) 0 2.5rem; border-top: 1px solid var(--line); position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.foot__tag { font-size: var(--t-sm); color: var(--tx-2); line-height: 1.7; max-width: 30ch; margin: 1.15rem 0 1.75rem; }
.socials { display: flex; gap: .6rem; flex-wrap: wrap; }
.soc {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--tx-3);
  transition: border-color var(--d) ease, color var(--d) ease, background-color var(--d) ease, transform var(--d) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .soc:hover { border-color: var(--ac-line); color: var(--ac); background: var(--ac-soft); transform: translateY(-2px); }
}
.foot-col h2 { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700; margin-bottom: 1.3rem; letter-spacing: -.01em; }
.foot-col ul { display: flex; flex-direction: column; gap: .7rem; }
.foot-col a { font-size: var(--t-sm); color: var(--tx-2); transition: color var(--d) ease; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: var(--tx); } }
.foot-contact { display: flex; flex-direction: column; gap: 1rem; }
.foot-contact li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-sm); color: var(--tx-2); line-height: 1.55; }
.foot-contact svg { flex: none; margin-top: .2rem; color: var(--tx-3); }
.foot-bot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid var(--line); }
.foot-bot p, .foot-bot a { font-size: var(--t-xs); color: var(--tx-3); }
.foot-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) { .foot-legal a:hover { color: var(--tx-2); } }

/* ---------------------------------------------------------------
   20. QUICK-PREVIEW MODAL
   --------------------------------------------------------------- */
.pmodal {
  position: fixed; inset: 0; z-index: 5000;
  display: grid; place-items: start center;
  padding: clamp(1rem, 5vh, 4rem) var(--gutter);
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-slow) ease, visibility 0s linear var(--d-slow);
}
.pmodal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.pmodal__box {
  position: relative;
  width: min(880px, 100%);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transform: scale(.965) translateY(12px);
  opacity: 0;
  transition: transform 240ms var(--e-out), opacity 240ms ease;
}
.pmodal.is-open .pmodal__box { transform: scale(1) translateY(0); opacity: 1; }
.pmodal__media { aspect-ratio: 16 / 9; background: var(--surface); }
.pmodal__media img, .pmodal__media video, .pmodal__media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.pmodal__body { padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.pmodal__title { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; margin: .9rem 0 1.1rem; }
.pmodal__desc { color: var(--tx-2); line-height: 1.78; }
.pmodal__result {
  margin-top: 1.75rem; padding: 1.25rem 1.4rem;
  background: var(--ac-soft); border: 1px solid var(--ac-line); border-radius: var(--r);
}
.pmodal__result dt { font-size: var(--t-xs); color: var(--ac); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pmodal__result dd { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; margin-top: .35rem; }
.pmodal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(7, 7, 8, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--tx-2);
  transition: color var(--d) ease, border-color var(--d) ease;
}
.pmodal__close:hover { color: var(--tx); border-color: var(--tx-2); }
.pmodal__foot { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.pmodal__loading { padding: 4rem; text-align: center; color: var(--tx-3); font-size: var(--t-sm); }

/* ---------------------------------------------------------------
   21. REVEAL (scroll entrance) — one gesture, used once per element
   --------------------------------------------------------------- */
.js-anim .r-up { opacity: 0; transform: translateY(14px); }
.js-anim .r-in { opacity: 0; }

/* ---------------------------------------------------------------
   22. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc--lead { grid-column: span 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .news { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .process__wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .process__aside { position: static; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --header-h: 72px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc--lead { grid-column: span 1; }
  .proj-grid { grid-template-columns: 1fr; }
  .proj--wide { grid-column: span 1; }
  .proj--wide .proj__media { aspect-ratio: 16 / 10; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bot { flex-direction: column; align-items: flex-start; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
}
@media (max-width: 460px) {
  .stat-grid { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------
   23. REDUCED MOTION — fewer and gentler, not zero
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.neura-smooth { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; transform: none; }
  .js-anim .hero__word,
  .js-anim .r-up { transform: none; opacity: 1; }
  .js-anim .r-in { opacity: 1; }
  .card, .quote, .btn { transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease !important; }
  .btn:hover, .quote:hover { transform: none; }
}

/* print — the case studies get printed by clients more than you'd think */
@media print {
  .site-header, .nav-drawer, .neura-grain, .neura-curtain, .pmodal,
  #neura-cursor-dot, #neura-cursor-ring, .hero__canvas, .cta__glow { display: none !important; }
  body { background: #fff; color: #000; }
}