/* ==========================================================================
   Novva.One — design system
   Look & feel after the "Spector" reference (dark editorial, oversized tight
   type, hairlines, pill buttons). Brand colour: Novva purple #900FFF.

   1 Tokens · 2 Base · 3 Type · 4 Layout · 5 Buttons · 6 Header · 7 Hero
   8 Section heads · 9 Work tiles · 10 Services · 11 Principles & numbers
   12 Feature · 13 Process · 14 AI & growth · 15 Industries · 16 Posts
   17 Call-to-action · 18 Footer · 19 Inner pages · 20 Forms · 21 Motion
   ========================================================================== */

/* 1 Tokens ----------------------------------------------------------------- */
:root {
  --purple: #900fff;
  --purple-deep: #6d00c4;
  --purple-light: #b266ff;      /* purple text on dark (readable) */
  --purple-tint: #f3e8ff;

  --ink: #0b0b0e;               /* text on light */
  --ink-2: #262a2d;             /* headline on light (Spector charcoal) */
  --ink-3: #5d6068;             /* secondary on light */
  --black: #050609;             /* Spector dark background */
  --black-2: #0d0e13;
  --black-3: #15161c;
  --white: #ffffff;
  --paper: #f9f9f9;
  --paper-2: #f0f0f2;
  --cream: #eadfd1;             /* big headline cream */
  --on-dark: #f4f1ec;
  --on-dark-2: #a9a9b3;
  --line-light: #d9d9de;
  --line-dark: rgba(255, 255, 255, 0.16);

  --ff: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --bar-h: 60px;
  --gutter: clamp(1.25rem, 0.6rem + 2vw, 2.5rem);
  --wrap: 1360px;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --radius: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 2 Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; font-family: var(--ff); font-size: 1.0625rem; line-height: 1.6; color: var(--ink);
  background: var(--black); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--purple); color: #fff; }
main:focus { outline: none; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--purple); color: #fff; padding: .7rem 1.1rem; border-radius: 8px; font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3 Type ------------------------------------------------------------------- */
.display, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; text-transform: uppercase; }
.display { font-size: min(8.1vw, 9.2rem); font-weight: 700; letter-spacing: -0.055em; line-height: 0.9; }
.h1 { font-size: clamp(3rem, 1.4rem + 7vw, 8.5rem); letter-spacing: -0.055em; line-height: 0.9; }
.h2 { font-size: clamp(2.4rem, 1.2rem + 5vw, 6.25rem); line-height: 0.92; }
.h3 { font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); line-height: 1; }
.title-case { text-transform: none; letter-spacing: -0.04em; line-height: 1; }

.accent { color: var(--purple); }
.on-dark .accent, .section--dark .accent { color: var(--purple-light); }
.lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.4rem); line-height: 1.5; letter-spacing: -0.015em; }
.kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.section--dark .kicker, .on-dark .kicker { color: var(--on-dark-2); }
.small-caps { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; line-height: 1.35; }
.muted { color: var(--ink-3); }
.section--dark .muted { color: var(--on-dark-2); }

/* the Spector-style asterisk mark */
.mark { display: inline-block; width: 1.9rem; height: 1.2rem; flex: none; background: url("../images/brand/novva-n-dark.svg") center / contain no-repeat; }
.section--dark .mark, .on-dark .mark, .page-hero .mark, .hero .mark, .reel .mark, .belief-pin .mark, .case-hero .mark, .cover-card .mark, .feature .mark, .services__panel .mark, .site-header .mark { background-image: url("../images/brand/novva-n-light.svg"); }

/* 4 Layout ----------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section); position: relative; }
.section--dark { background: var(--black); color: var(--on-dark); }
.section--light { background: var(--white); color: var(--ink-2); }
.section--paper { background: var(--paper); color: var(--ink-2); }
.section--tight { padding-block: calc(var(--section) * .6); }

/* 5 Buttons ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .75rem; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; line-height: 1; padding: 1rem 1.6rem; border-radius: 999px; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); white-space: nowrap; }
.btn--accent { background: var(--purple); color: #fff; }
.btn--accent:hover { background: var(--purple-deep); }
.btn--pill { background: transparent; color: var(--ink); border: 1px solid var(--line-light); padding: 1.15rem 1.7rem; font-size: 1.125rem; }
.btn--pill:hover { border-color: var(--ink); }
.btn--pill.btn--ghost { border-color: transparent; padding-inline: .6rem; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line-light); }
.btn--pill.btn--ghost:hover { text-decoration-color: var(--purple); }
.btn--light { background: var(--on-dark); color: var(--black); }
.btn--light:hover { background: #fff; }
.btn--outline-dark { border: 1px solid var(--line-dark); color: var(--on-dark); }
.btn--outline-dark:hover { border-color: #fff; }
.section--dark .btn--pill { color: var(--on-dark); border-color: var(--line-dark); }
.section--dark .btn--pill:hover { border-color: #fff; }
.btn__arrow { width: 2.1rem; height: 1px; background: var(--purple); position: relative; transition: width .3s var(--ease); }
.btn__arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--purple); border-right: 1px solid var(--purple); transform: rotate(45deg); }
.btn:hover .btn__arrow { width: 2.8rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-top: 2.2rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.link-arrow::after { content: "\2192"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* 6 Header ----------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--bar-h); color: #fff; }
.site-header__bar { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); position: relative; z-index: 2; transition: background .35s, backdrop-filter .35s; background: linear-gradient(rgba(5,6,9,.72), rgba(5,6,9,.0)); }
.site-header.is-solid .site-header__bar { background: rgba(38, 42, 45, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.logo img { width: 150px; height: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1.4rem, 3.4vw, 4.2rem); }
.nav__item { position: relative; }
.nav__link { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.03em; color: #fff; padding: .5rem 0; position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: var(--purple-light); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__link { transition: color .25s; }
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--purple-light); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.has-menu > .nav__link::before { content: ""; order: 2; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: .1rem; }
.menu { position: absolute; top: calc(100% + 14px); left: 50%; width: 360px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none; background: rgba(21, 22, 28, .97); border: 1px solid var(--line-dark); border-radius: 16px; padding: .6rem; transition: opacity .25s, transform .25s var(--ease), visibility .25s; backdrop-filter: blur(16px); }
.nav__item.is-open .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.menu__link { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 1rem; border-radius: 10px; transition: background .2s; }
.menu__link:hover { background: rgba(255,255,255,.07); }
.menu__num { font-family: var(--ff-mono); font-size: .75rem; color: var(--purple-light); }
.menu__title { font-weight: 600; letter-spacing: -0.02em; }
.menu__all { display: block; padding: .8rem 1rem .6rem; margin-top: .3rem; border-top: 1px solid var(--line-dark); font-weight: 600; color: var(--purple-light); }
.menu-toggle { display: none; width: 44px; height: 44px; position: relative; }
.menu-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle span:first-child { top: 17px; } .menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--black); padding: calc(var(--bar-h) + 2rem) var(--gutter) 2rem; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-100%); transition: transform .5s var(--ease-io); visibility: hidden; color: #fff; }
.mobile-menu.is-open { transform: none; visibility: visible; }
.mobile-menu li a { display: block; font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: -0.05em; text-transform: uppercase; line-height: 1.15; border-bottom: 1px solid var(--line-dark); padding-block: .35rem; }
.mobile-menu li a[aria-current="page"] { color: var(--purple-light); }
.mobile-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--on-dark-2); }
body.menu-open { overflow: hidden; }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .logo img { width: 128px; }
}

/* 7 Hero ------------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--black); color: var(--on-dark); isolation: isolate; padding: calc(var(--bar-h) + clamp(1.5rem, 3vw, 3rem)) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); }
.hero__bg { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(60% 55% at 72% 38%, rgba(144, 15, 255, .55), rgba(144, 15, 255, 0) 70%),
    radial-gradient(45% 50% at 12% 95%, rgba(144, 15, 255, .28), rgba(144,15,255,0) 70%),
    linear-gradient(180deg, #07070b 0%, #050609 55%, #08050f 100%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 70% at 70% 35%, #000, transparent 85%); -webkit-mask-image: radial-gradient(70% 70% at 70% 35%, #000, transparent 85%); }
.hero__system { position: absolute; right: -9%; top: 12%; width: min(52vw, 760px); aspect-ratio: 1; z-index: -1; opacity: .95; }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.hero__tag { display: inline-flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--on-dark-2); }
.toggle-dot { display: inline-flex; width: 38px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; flex: none; }
.toggle-dot::before, .toggle-dot::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; }
.toggle-dot::before { left: 0; background: var(--purple); } .toggle-dot::after { right: 0; background: #fff; }
.hero__name { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.4rem); font-weight: 600; letter-spacing: -0.06em; line-height: .95; color: var(--cream); margin-top: .9rem; max-width: 9ch; }

.hero__list { border-left: 1px solid var(--purple); padding-left: 1.1rem; margin-right: clamp(0rem, 8vw, 10rem); }
.hero__list small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--on-dark-2); margin-bottom: .8rem; text-transform: uppercase; }
.hero__list li { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1.12; color: rgba(244,241,236,.72); }
.hero__title { margin-top: clamp(3rem, 8vw, 7rem); position: relative; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span { display: block; }
.hero__title .l1 { color: var(--purple); }
.hero__title .l2 > span { background: linear-gradient(180deg, var(--cream) 0%, #cdb9d9 70%, rgba(205, 185, 217, .55) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__title .l3 { color: var(--cream); }
.hero__title .glyph { display: inline-block; width: .62em; height: auto; margin-left: .2em; vertical-align: .02em; }
.hero__side { position: absolute; right: var(--gutter); bottom: clamp(1.5rem, 3vw, 2.5rem); writing-mode: vertical-rl; transform: rotate(180deg); font-size: .75rem; font-weight: 600; color: var(--on-dark-2); letter-spacing: .02em; }
.hero__lead { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 1.6rem; padding-right: 3rem; }
.hero__lead p { max-width: 46ch; color: var(--on-dark-2); font-size: 1.05rem; }
.hero__lead .btn-row { margin: 0; }
@media (max-width: 800px) {
  .hero__top { flex-direction: column; }
  .hero__list { margin-right: 0; }
  .hero__system { width: 120vw; right: -40%; top: 18%; opacity: .55; }
  .hero__side { display: none; }
  .hero__lead { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .display { font-size: 11.4vw; }
}

/* 8 Section heads ---------------------------------------------------------- */
.label { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.3rem; position: relative; }
.label::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 1px; background: var(--line-light); }
.section--dark .label::after { background: var(--line-dark); }
.label__name { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.03em; }
.label__side { text-align: right; font-weight: 600; letter-spacing: -0.03em; font-size: 1.0625rem; }
.label__side small { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; font-weight: 500; color: var(--ink-3); font-size: .8125rem; margin-bottom: .3rem; }
.section--dark .label__side small { color: var(--on-dark-2); }
.center-head { text-align: center; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.center-head .h2 { color: var(--cream); }
.center-head p { margin-top: 1.1rem; font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--on-dark-2); }
.section--light .center-head .h2, .section--paper .center-head .h2 { color: var(--ink-2); }
.section--light .center-head p, .section--paper .center-head p { color: var(--ink-3); }
.stagger { margin-top: clamp(1.5rem, 3vw, 3rem); }
.stagger__row { border-bottom: 1px solid var(--line-light); padding-block: .1em; overflow: hidden; }
.stagger__row:last-child { border-bottom: 0; }
.stagger__row span { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: -0.055em; line-height: .96; font-size: clamp(2.2rem, 1rem + 5.6vw, 6.9rem); color: var(--ink-2); }
.stagger__row.is-dim span { color: #b3b3b3; }
.stagger__row:nth-child(2) span { padding-left: clamp(1rem, 7vw, 6.5rem); }
.stagger__row:nth-child(3) span { padding-left: clamp(2rem, 14vw, 13.5rem); }
.stagger__row:nth-child(4) span { padding-left: clamp(1rem, 7vw, 6.5rem); }
.section--dark .stagger__row { border-color: var(--line-dark); }
.section--dark .stagger__row span { color: var(--cream); }
.section--dark .stagger__row.is-dim span { color: #6c6c74; }

/* 9 Work tiles (rows that expand on hover, as on Spector) ------------------- */

.tile { position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--black-3); isolation: isolate; transition: flex-grow .7s var(--ease); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,6,9,0) 40%, rgba(5,6,9,.85) 100%); opacity: 0; transition: opacity .5s; }

.tile:hover img, .tile:focus-visible img { transform: scale(1.04); filter: brightness(.8); }
.tile:hover::after, .tile:focus-visible::after{ opacity: 1; transform: none; }
.more { text-align: center; padding: clamp(3rem, 7vw, 6rem) var(--gutter); background: var(--black); }
.more a { display: inline-block; }
.more .h2 { color: var(--cream); transition: color .3s; }
.more a:hover .h2 { color: var(--purple-light); }
@media (max-width: 760px) {  .tile { aspect-ratio: 4 / 3; flex: none; }  .tile::after { opacity: 1; } }

/* 10 Services (interactive) ------------------------------------------------ */
.services__stage { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.9fr) minmax(180px, 1fr); gap: 0; margin-top: clamp(2.5rem, 5vw, 5rem); align-items: stretch; min-height: 560px; }
.services__nav { display: flex; flex-direction: column; justify-content: flex-start; gap: .25rem; padding-top: .5rem; }
.services__nav button { text-align: left; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.04em; padding: .45rem 0; color: var(--ink-2); transition: color .25s, transform .3s var(--ease); display: block; }
.services__nav button:hover { transform: translateX(6px); }
.services__nav button[aria-selected="true"] { color: var(--purple); }
.services__panel { position: relative; overflow: hidden; background: var(--paper-2); border-radius: 0; min-height: 560px; }
.services__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.services__slide.is-active { opacity: 1; visibility: visible; }
.services__art { position: absolute; inset: 0; }
.services__art svg { width: 100%; height: 100%; }
.services__name { position: absolute; left: 1.4rem; top: 1.2rem; z-index: 3; font-size: clamp(2.6rem, 1.4rem + 4vw, 6rem); font-weight: 700; letter-spacing: -0.06em; line-height: .96; color: var(--ink); mix-blend-mode: normal; max-width: 8ch; transform: translateX(0); }
.services__num { position: absolute; right: 1.2rem; bottom: .2rem; z-index: 3; font-size: clamp(3rem, 2rem + 4vw, 6.5rem); font-weight: 600; letter-spacing: -0.06em; color: #fff; line-height: 1; mix-blend-mode: difference; }
.services__progress { position: absolute; left: 52%; bottom: 2.6rem; width: 18%; height: 2px; background: rgba(11,11,14,.12); z-index: 3; }
.services__progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--purple); }
.services__caption { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 3; display: flex; gap: .5rem; max-width: 24ch; font-size: .75rem; font-weight: 600; text-transform: uppercase; line-height: 1.3; color: var(--ink-3); }
.services__side { padding: .6rem 0 0 1.6rem; }
.services__side ul { display: grid; gap: .3rem; }
.services__side li { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.04em; color: var(--ink-2); }
.services__side li::before { content: "+"; color: var(--purple); margin-right: .55rem; font-weight: 600; }
.services__side .link-arrow { margin-top: 1.4rem; font-size: .95rem; }
.services__side-slide { display: none; } .services__side-slide.is-active { display: block; animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .services__stage { grid-template-columns: 1fr; min-height: 0; }
  .services__nav { flex-direction: row; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: 1.2rem; }
  .services__panel { min-height: 420px; }
  .services__name { left: 1rem; }
  .services__side { padding: 1.4rem 0 0; }
}

/* 11 Principles & numbers -------------------------------------------------- */
.principles { margin-top: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 7rem); }
.principles__mark { position: sticky; top: calc(var(--bar-h) + 40px); align-self: start; color: var(--paper-2); }
.principles__mark img { width: min(100%, 280px); height: auto; opacity: .1; filter: grayscale(1); }
.principles__title { font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.03; border-block: 1px solid var(--line-light); padding-block: .5rem; }
.principles__copy { margin-top: 2.4rem; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); line-height: 1.45; letter-spacing: -0.03em; color: var(--ink-3); max-width: 52ch; }
.numbers { margin-top: clamp(3rem, 6vw, 6rem); }
.number { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(0, 1.3fr); gap: 2rem; align-items: center; padding-block: 2rem; border-bottom: 1px solid var(--line-light); position: relative; }
.number::before { content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem; width: 1px; background: var(--line-light); }
.number::after { content: ""; position: absolute; left: 0; bottom: 1.6rem; height: 1.6rem; width: 2px; background: var(--purple); }

@media (max-width: 860px) { .principles { grid-template-columns: 1fr; } .principles__mark { display: none; } .number { grid-template-columns: 1fr; gap: .5rem; }  }

/* 12 Feature (case study banner) ------------------------------------------- */
.feature { position: relative; min-height: min(86vh, 760px); display: grid; align-items: end; overflow: hidden; background: var(--black); color: #fff; isolation: isolate; }
.feature__img { position: absolute; inset: 0; z-index: -2; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.78); transform: scale(1.04); transition: transform 1.4s var(--ease); }
.feature:hover .feature__img img { transform: scale(1); }
.feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,6,9,.55) 0%, rgba(5,6,9,.1) 35%, rgba(5,6,9,.92) 100%), radial-gradient(60% 60% at 80% 20%, rgba(144,15,255,.35), transparent 70%); }
.feature__inner { padding: clamp(2rem, 5vw, 5rem) var(--gutter); max-width: calc(var(--wrap) + var(--gutter) * 2); width: 100%; margin-inline: auto; }
.feature__brand { display: block; font-size: 1.1rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.feature__brand small { display: block; letter-spacing: -0.01em; text-transform: none; color: rgba(255,255,255,.8); font-size: .8rem; margin-top: .15rem; }
.feature__play { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 108px; height: 108px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.feature__play::before { content: ""; border-style: solid; border-width: 17px 0 17px 28px; border-color: transparent transparent transparent #fff; margin-left: 8px; }
.feature:hover .feature__play { transform: translate(-50%,-50%) scale(1.08); background: rgba(144,15,255,.55); }
.feature__meta { border-top: 1px solid rgba(255,255,255,.4); margin-top: 3rem; padding-top: 1.2rem; display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; }
.feature__meta h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1.1; }
.feature__meta p { color: rgba(255,255,255,.82); }
.feature a.cover { position: absolute; inset: 0; z-index: 5; }
@media (max-width: 760px) { .feature__meta { grid-template-columns: 1fr; gap: .8rem; } .feature__play { width: 84px; height: 84px; } }

/* 13 Process slideshow (Spector "Process Carousel": 3 cards, edge cards tilt as they leave) ---- */
.process__head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-top: clamp(2rem, 4vw, 4rem); }
.process__head .h2 { color: var(--ink-2); font-size: clamp(2rem, 1rem + 3.6vw, 4.6rem); }
.process__head p { color: var(--ink-3); font-size: 1.15rem; letter-spacing: -0.02em; max-width: 44ch; }
.carousel { margin-top: clamp(2rem, 4vw, 4rem); position: relative; }
.carousel__track { position: relative; perspective: 1200px; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline-offset: 6px; }
.carousel__track.is-dragging { cursor: grabbing; }
.step { position: absolute; left: 0; top: 0; box-sizing: border-box; background: var(--paper); border-radius: 12px; padding: clamp(1.4rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 1.1rem; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: background .3s; }
.step:hover { background: var(--purple-tint); }
.step__top { order: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.step__top h3 { font-size: clamp(2rem, 1.2rem + 1.7vw, 3.2rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; color: var(--ink-2); }
.step__top span { font-size: clamp(1.2rem, 1rem + .6vw, 1.7rem); font-weight: 500; letter-spacing: -0.04em; color: var(--purple); font-family: var(--ff); }
.step__top span::before { content: "/"; }
.step__lead { order: 2; color: var(--ink-2); letter-spacing: -0.03em; line-height: 1.3; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); max-width: 22ch; }
.step__lead::before { content: ""; display: block; width: 56px; height: 2px; background: var(--purple); margin-bottom: 1.1rem; }
.step__art { order: 3; aspect-ratio: auto; height: clamp(190px, 17vw, 260px); border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.step__art svg { width: 56%; height: auto; }
.step ul { order: 4; display: grid; gap: .45rem; margin-top: auto; }
.step li { color: var(--ink-3); font-size: .98rem; letter-spacing: -0.03em; }
.step li::before { content: "+"; color: var(--purple); margin-right: .6rem; }
.carousel__arrows { display: flex; justify-content: center; gap: 1.6rem; margin-top: 1.6rem; }
.arrow-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--purple); border-radius: 50%; transition: background .25s, transform .25s var(--ease); }
.arrow-btn:hover { background: var(--purple-tint); }
.arrow-btn[data-prev]:hover { transform: translateX(-3px); } .arrow-btn[data-next]:hover { transform: translateX(3px); }
.arrow-btn svg { width: 28px; height: 14px; }
@media (max-width: 900px) { .process__head { grid-template-columns: 1fr; gap: 1rem; } }

/* 14 AI & growth ----------------------------------------------------------- */
.ai { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.panel { border: 1px solid var(--line-dark); border-radius: 22px; padding: clamp(1.4rem, 3vw, 2.6rem); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); }
.panel--next { background: linear-gradient(160deg, rgba(144,15,255,.22), rgba(144,15,255,.04) 60%); border-color: rgba(178,102,255,.35); }
.panel__label { display: inline-flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--purple-light); margin-bottom: 1.6rem; }
.panel__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-light); }
.panel ul { display: grid; gap: 0; }
.panel .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; padding-block: 1.05rem; border-top: 1px solid var(--line-dark); }
.panel .row:first-child { border-top: 0; padding-top: 0; }
.panel .row b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; }
.panel .row span { color: var(--on-dark-2); letter-spacing: -0.015em; font-size: .98rem; }
.panel--next .row { grid-template-columns: 1fr; gap: .3rem; }
@media (max-width: 960px) { .ai { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .panel .row { grid-template-columns: 1fr; gap: .3rem; } }

.growth { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 7rem); margin-top: clamp(2rem, 4vw, 4rem); align-items: start; }

@media (max-width: 860px) { .growth { grid-template-columns: 1fr; }   }

/* 15 Industries ------------------------------------------------------------ */
.inds { margin-top: clamp(2rem, 4vw, 4rem); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); }
.ind { padding: 2rem 1.6rem 2.4rem 0; border-bottom: 1px solid var(--line-light); border-right: 1px solid var(--line-light); padding-left: 1.6rem; position: relative; transition: background .3s; }
.ind:nth-child(3n) { border-right: 0; }
.ind:hover { background: var(--paper); }
.ind small { font-family: var(--ff-mono); font-size: .75rem; color: var(--purple); }
.ind h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.08; margin: .8rem 0 .7rem; color: var(--ink-2); }
.ind p { color: var(--ink-3); letter-spacing: -0.02em; }
@media (max-width: 860px) { .inds { grid-template-columns: 1fr 1fr; } .ind:nth-child(3n) { border-right: 1px solid var(--line-light); } .ind:nth-child(2n) { border-right: 0; } }
@media (max-width: 560px) { .inds { grid-template-columns: 1fr; } .ind { border-right: 0 !important; padding-left: 0; } }

/* 16 Posts ----------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2rem, 4vw, 4rem); }

.post { display: block; }
.post__media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--black-3); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__meta { display: flex; gap: 1rem; margin-top: 1.1rem; font-size: .8125rem; font-weight: 600; text-transform: uppercase; color: var(--ink-3); }
.post__meta span:first-child { color: var(--purple); }
.post__title { margin-top: .5rem; font-size: clamp(1.3rem, 1rem + .8vw, 1.8rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.08; color: var(--ink-2); transition: color .25s; }
.post:hover .post__title { color: var(--purple); }
.section--dark .post__title { color: var(--on-dark); } .section--dark .post:hover .post__title { color: var(--purple-light); }
@media (max-width: 860px) { .posts{ grid-template-columns: 1fr; } }

/* 17 Call-to-action -------------------------------------------------------- */
.call { padding-block: var(--section); }
.call__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 6vw, 8rem); align-items: end; }
.call__title { font-size: clamp(2rem, 1.1rem + 3.4vw, 4.4rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; margin-top: 1.2rem; max-width: 18ch; color: var(--ink-2); }
.call__aside { border-top: 1px solid var(--line-light); padding-top: 1.6rem; }
.call__lead { margin-top: 1.4rem; color: var(--ink-3); letter-spacing: -0.02em; }
.call__mail { margin-top: 1rem; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.03em; }
.call__mail a { border-bottom: 1px solid var(--purple); }
@media (max-width: 860px) { .call__grid { grid-template-columns: 1fr; } }

/* 18 Footer (light, giant wordmark - as on Spector) ----------------------- */
.site-footer { background: var(--white); color: var(--ink-2); padding: clamp(2.5rem, 5vw, 5rem) 0 1.4rem; overflow: hidden; position: relative; z-index: 3; }
.site-footer__giant { font-size: 16.4vw; font-weight: 700; letter-spacing: -0.075em; line-height: .78; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; margin-left: -.03em; }
.site-footer__giant .char { padding-top: .06em; }
.site-footer__tag { text-align: right; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line-light); }
.site-footer__tag b { color: var(--purple); font-weight: 600; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 2rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.site-footer__start h2 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; }
.site-footer__start p { margin-top: 1rem; color: var(--ink-3); letter-spacing: -0.02em; max-width: 34ch; font-size: .95rem; }
.site-footer__start .btn { margin-top: 1.4rem; }
.site-footer__col h2 { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; }
.site-footer__col li { padding-block: .22rem; }
.site-footer__col a { font-size: 1rem; font-weight: 500; letter-spacing: -0.03em; transition: color .2s; }
.site-footer__col a:hover { color: var(--purple); }
.site-footer__contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 1.6rem; border-top: 1px solid var(--line-light); }
.site-footer__about { display: grid; gap: .8rem; max-width: 36ch; }
.site-footer__about p { color: var(--ink-3); font-size: .9rem; letter-spacing: -0.01em; }
.site-footer__about p b { color: var(--purple); font-weight: 600; }
.copy { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); font-weight: 500; letter-spacing: -0.055em; line-height: 1; position: relative; text-align: left; transition: color .25s; color: var(--ink-2); }
.copy:hover { color: var(--purple); }
.copy.is-copied .copy__text { opacity: 0; }
.copy.is-copied::after { content: attr(data-copied); position: absolute; left: 0; top: 0; color: var(--purple); }
.site-footer address { color: var(--ink-3); font-size: .95rem; max-width: 34ch; margin-top: .8rem; }
.site-footer__emblem { width: clamp(3.4rem, 6vw, 5.5rem); height: auto; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; font-size: .8rem; color: var(--ink-3); }
.to-top:hover { color: var(--purple); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__start { grid-column: 1 / -1; } }

/* 19 Inner pages ----------------------------------------------------------- */
.page-hero { background: var(--black); color: var(--on-dark); padding: calc(var(--bar-h) + clamp(3rem, 7vw, 7rem)) 0 clamp(3rem, 6vw, 6rem); position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(50% 70% at 85% 10%, rgba(144,15,255,.42), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(144,15,255,.18), transparent 70%); }
.page-hero .kicker { color: var(--purple-light); display: inline-flex; align-items: center; gap: .7rem; }
.page-hero .h1 { margin-top: 1.6rem; color: var(--cream); max-width: 15ch; }
.page-hero .lead { margin-top: 2rem; max-width: 56ch; color: var(--on-dark-2); }
.crumbs { display: flex; gap: .6rem; font-size: .8125rem; color: var(--on-dark-2); margin-bottom: 2.4rem; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: .6rem; opacity: .5; }

.block-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 7rem); }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; margin-top: 2.2em; color: var(--ink-2); }
.prose h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.04em; margin-top: 1.8em; color: var(--ink-2); }
.prose p, .prose li { color: #3b3e44; letter-spacing: -0.01em; }
.prose ul { list-style: none; display: grid; gap: .5rem; }
.prose ul li { padding-left: 1.4rem; position: relative; }
.prose ul li::before { content: "+"; position: absolute; left: 0; color: var(--purple); font-weight: 700; }
.prose a { border-bottom: 1px solid var(--purple); color: var(--purple-deep); }
.prose blockquote { border-left: 2px solid var(--purple); padding-left: 1.4rem; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--ink-2); }
.prose img { border-radius: var(--radius); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { border: 1px solid var(--line-light); border-radius: 999px; padding: .4rem .9rem; font-size: .875rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.section--dark .chip { border-color: var(--line-dark); color: var(--on-dark); }

.cap { padding: 1.6rem 1.4rem 2rem 0; border-bottom: 1px solid var(--line-light); }
.cap h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1.1; color: var(--ink-2); }
.cap p { margin-top: .6rem; color: var(--ink-3); letter-spacing: -0.02em; font-size: .98rem; }
.section--dark .cap{ border-color: var(--line-dark); } .section--dark .cap h3 { color: var(--on-dark); } .section--dark .cap p { color: var(--on-dark-2); }
@media (max-width: 860px) { .block-grid{ grid-template-columns: 1fr; } }

.cs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.next-project { display: block; background: var(--black); color: var(--on-dark); padding: clamp(3rem, 7vw, 7rem) var(--gutter); text-align: center; }
.next-project small { color: var(--on-dark-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.next-project .h2 { color: var(--cream); margin-top: 1rem; transition: color .3s; }
.next-project:hover .h2 { color: var(--purple-light); }
@media (max-width: 860px) { .cs{ grid-template-columns: 1fr 1fr; } }

.article-hero img { width: 100%; max-height: 70vh; object-fit: cover; }
.article__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; font-weight: 600; text-transform: uppercase; color: var(--on-dark-2); margin-top: 2rem; }
.article__meta span:first-child { color: var(--purple-light); }

.tl { margin-top: 2.5rem; border-top: 1px solid var(--line-light); }
.tl li { display: grid; grid-template-columns: 5rem 1fr 1.4fr; gap: 2rem; padding-block: 1.8rem; border-bottom: 1px solid var(--line-light); }
.tl .n { font-family: var(--ff-mono); font-size: .85rem; color: var(--purple); }
.tl h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; color: var(--ink-2); }
.tl p { color: var(--ink-3); letter-spacing: -0.02em; }
@media (max-width: 760px) { .tl li { grid-template-columns: 3rem 1fr; } .tl li p { grid-column: 2; } }

/* 20 Forms ----------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }

.form { display: grid; gap: 1.4rem; }

.field { display: grid; gap: .45rem; }
.field label { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-light); padding: .7rem 0; border-radius: 0; transition: border-color .25s; }
.field textarea { min-height: 150px; resize: vertical; border: 1px solid var(--line-light); padding: .9rem; border-radius: 10px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple); }
.field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23900fff' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") right .2rem center no-repeat; padding-right: 1.6rem; }
.field--hp { position: absolute; left: -9999px; }
.form__note { font-size: .875rem; color: var(--ink-3); }
.form__status { padding: 1rem 1.2rem; border-radius: 10px; font-size: .98rem; display: none; }
.form__status.is-shown { display: block; }
.form__status.is-ok { background: #e7f7ee; color: #0b5d34; }
.form__status.is-warn { background: #fff4e0; color: #7a4a00; }
.form__status a { text-decoration: underline; }
@media (max-width: 860px) { .contact{ grid-template-columns: 1fr; } }

/* 21 Motion ---------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .split .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.js .split.is-in .line > span { transform: none; }
.js .hero__system [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); transition-delay: var(--d, 0ms); }
.js .hero__system.is-in [data-draw] { stroke-dashoffset: 0; }
.js .hero__system [data-pop] { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .5s, transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.js .hero__system.is-in [data-pop] { opacity: 1; transform: none; }
.js .hero__system [data-slide] { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .hero__system.is-in [data-slide] { opacity: 1; transform: none; }
.hero__system .ring { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.hero__system .ln { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1; }

.hero__system .nd { fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js .split .line > span { opacity: 1 !important; transform: none !important; }
}

/* 22 Inner-page components -------------------------------------------------- */
.page-hero--short { padding-bottom: clamp(2rem, 4vw, 4rem); }
.page-hero--short .lead { margin-top: 1.2rem; font-size: 1rem; }
.statement { font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; color: var(--ink-2); }
.cap ul { display: grid; gap: .35rem; margin-top: 1rem; }
.cap li { color: var(--ink-3); letter-spacing: -0.02em; font-size: .98rem; }
.cap li::before { content: "+"; color: var(--purple); margin-right: .55rem; font-weight: 600; }
.section--dark .cap li { color: var(--on-dark-2); }
.prose--legal { max-width: 78ch; }
.prose--legal h2 { font-size: 1.5rem; margin-top: 2em; }
.faq details { border-top: 1px solid var(--line-light); padding-block: 1.2rem; }
.faq details:last-child { border-bottom: 1px solid var(--line-light); }
.faq summary { cursor: pointer; list-style: none; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.04em; color: var(--ink-2); display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--purple); font-size: 1.6rem; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .9rem; color: var(--ink-3); letter-spacing: -0.015em; max-width: 62ch; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); }
.related a { display: grid; gap: .5rem; padding: 1.6rem 1.4rem 2rem 0; height: 100%; align-content: start; }
.related li { border-bottom: 1px solid var(--line-dark); }
.related li + li a { padding-left: 1.4rem; border-left: 1px solid var(--line-dark); }

.related b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; color: var(--cream); transition: color .25s; }
.related span:last-child { color: var(--on-dark-2); letter-spacing: -0.02em; }
.related a:hover b { color: var(--purple-light); }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } .related li + li a { padding-left: 0; border-left: 0; } }

/* articles */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 5vw, 4rem); align-items: start; }
.article .prose { max-width: 70ch; font-size: 1.12rem; }
.article .prose h2 { margin-top: 1.8em; }
.article__aside { position: sticky; top: calc(var(--bar-h) + 24px); display: grid; gap: 14px; }
.aside-box { border: 1px solid var(--line-light); border-radius: 18px; padding: 1.6rem; }
.aside-box h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ink-2); margin-bottom: 1rem; }
.aside-box ul { display: grid; gap: .7rem; }
.aside-box p { color: var(--ink-3); margin-bottom: 1.2rem; font-size: .98rem; }
.aside-box--dark { background: var(--black); border-color: transparent; }
.aside-box--dark h2 { color: var(--cream); } .aside-box--dark p { color: var(--on-dark-2); }
@media (max-width: 960px) { .article { grid-template-columns: 1fr; } .article__aside { position: static; } }

/* insights feed (alternating halves, as in the Spector Lab) */
.feed { background: var(--paper); padding-block: 2px; }
.feed__row { display: grid; grid-template-columns: 1.08fr .92fr; gap: 4px; padding: 2px 4px; position: relative; }

.feed__media { border-radius: 12px; overflow: hidden; background: var(--black-3); min-height: 320px; }
.feed__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.feed__row:hover .feed__media img { transform: scale(1.04); }

.feed__row > a.cover { position: absolute; inset: 0; z-index: 2; }
@media (max-width: 860px) { .feed__row { grid-template-columns: 1fr; } .feed__media { aspect-ratio: 4/3; min-height: 0; }  }

/* work index (stacked covers) */
.covers { background: var(--black); }
.cover-card { position: relative; display: grid; place-items: center; text-align: center; min-height: min(92vh, 820px); overflow: hidden; isolation: isolate; color: #fff; padding: 6rem var(--gutter); }
.cover-card + .cover-card { margin-top: 4px; }
.cover-card__img { position: absolute; inset: 0; z-index: -2; }
.cover-card__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); filter: brightness(.62) saturate(.95); transition: transform 1.6s var(--ease), filter .6s; }
.cover-card:hover .cover-card__img img { transform: scale(1); filter: brightness(.74) saturate(1); }
.cover-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(5,6,9,.55), rgba(5,6,9,.15) 80%), linear-gradient(180deg, rgba(144,15,255,.18), rgba(5,6,9,.35)); }
.cover-card__tag { display: inline-flex; background: rgba(255,255,255,.95); color: var(--ink); border-radius: 8px; padding: .5rem .9rem; font-weight: 700; letter-spacing: -0.03em; font-size: .95rem; }
.cover-card__tag img { max-height: 28px; width: auto; }
.cover-card__title { font-size: clamp(3rem, 1.2rem + 7vw, 8.4rem); font-weight: 700; letter-spacing: -0.065em; line-height: .92; margin-top: 1.4rem; }
.cover-card__rule { display: block; width: 80px; height: 1px; background: rgba(255,255,255,.7); margin: 1.6rem auto; }
.cover-card__sum { max-width: 34ch; margin-inline: auto; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; }
.cover-card__meta { margin-top: 1.2rem; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: rgba(255,255,255,.75); }
.cover-card a.cover { position: absolute; inset: 0; z-index: 3; }

/* case study */
.case-hero { position: relative; min-height: min(100svh, 900px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; color: #fff; padding: calc(var(--bar-h) + 3rem) var(--gutter) clamp(2rem, 4vw, 3.5rem); }
.case-hero__img { position: absolute; inset: 0; z-index: -2; }
.case-hero__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.9); }
.case-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,6,9,.5), rgba(5,6,9,.2) 40%, rgba(5,6,9,.92)), radial-gradient(60% 50% at 85% 10%, rgba(144,15,255,.4), transparent 70%); }
.case-hero .crumbs { position: absolute; top: calc(var(--bar-h) + 1.6rem); left: var(--gutter); margin: 0; }
.case-hero__title { font-size: clamp(3.2rem, 1rem + 9vw, 10.5rem); font-weight: 700; letter-spacing: -0.065em; line-height: .88; max-width: 12ch; }
.case-hero__sub { margin-top: 1.6rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.9rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; max-width: 30ch; }
.case-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 2.4rem; flex-wrap: wrap; }
.case-hero__logo { background: #fff; border-radius: 10px; padding: .8rem 1.2rem; display: inline-flex; }
.case-hero__logo img { height: 34px; width: auto; }
.case-hero__note { border-left: 1px solid var(--purple-light); padding-left: 1rem; max-width: 48ch; font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line-light); }
.facts dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.facts dd { margin-top: .4rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-2); }
.showcase { background: var(--paper); border-radius: 18px; overflow: hidden; margin-top: clamp(2rem, 4vw, 4rem); }
.showcase img { width: 100%; max-height: 90vh; object-fit: contain; margin-inline: auto; }
.note { font-size: .9rem; color: var(--ink-3); margin-top: 1.4rem; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }

/* clients */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-light); margin-top: clamp(2rem, 4vw, 3.5rem); }
.logos li { display: grid; place-items: center; height: 140px; border-bottom: 1px solid var(--line-light); border-right: 1px solid var(--line-light); padding: 1.5rem; }
.logos li:nth-child(4n) { border-right: 0; }
.logos img { max-height: 54px; max-width: 150px; width: auto; filter: grayscale(1); opacity: .65; transition: filter .3s, opacity .3s; }
.logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 760px) { .logos { grid-template-columns: repeat(2, 1fr); } .logos li:nth-child(4n) { border-right: 1px solid var(--line-light); } .logos li:nth-child(2n) { border-right: 0; } }

/* about */
.belief { font-size: clamp(2rem, 1rem + 3.6vw, 5rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; color: var(--cream); max-width: 22ch; }
.belief em { font-style: normal; color: var(--purple-light); }

.partners { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: 2.5rem; }
.partners h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; color: var(--ink-2); margin: .8rem 0; }
.partners p { color: var(--ink-3); letter-spacing: -0.02em; }
.partners img { margin-top: 1.6rem; height: 56px; width: auto; }
@media (max-width: 760px) { .partners{ grid-template-columns: 1fr; } }

/* form chips + misc */
.chips-check { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips-check label { position: relative; cursor: pointer; text-transform: none; letter-spacing: -0.01em; font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.chips-check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips-check span { display: inline-block; border: 1px solid var(--line-light); border-radius: 999px; padding: .5rem 1rem; transition: background .2s, color .2s, border-color .2s; }
.chips-check input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; }
.chips-check input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.field legend { padding: 0; margin-bottom: .6rem; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; color: var(--ink-3); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt { text-transform: none; font-weight: 400; color: var(--ink-3); }
.err-hero { min-height: 100svh; display: grid; align-items: center; }
.case-hero .kicker, .kicker:has(> .mark) { display: inline-flex; align-items: center; gap: .7rem; }

/* 23 Spector motion ---------------------------------------------------------
   Intro curtain · line-mask rise · character reveal · rolling digits ·
   3D logo carousel · sticky-stacking covers · parallax                       */
html.js body::before { content: ""; position: fixed; inset: 0; z-index: 300; background: var(--black); pointer-events: none; animation: curtain .7s .5s var(--ease-io) forwards; }
@keyframes curtain { to { opacity: 0; visibility: hidden; } }
html.js .site-header { opacity: 0; transform: translateY(-12px); transition: opacity .8s .9s var(--ease), transform .8s .9s var(--ease); }
html.js.is-ready .site-header { opacity: 1; transform: none; }
/* content waits for the intro to finish before animating in */
.js:not(.is-ready) [data-reveal].is-in { opacity: 0; transform: translateY(26px); }
.js:not(.is-ready) .split.is-in .line > span { transform: translateY(105%); }
.js:not(.is-ready) .hero__system.is-in [data-draw] { stroke-dashoffset: 1; }
.js:not(.is-ready) .hero__system.is-in [data-pop], .js:not(.is-ready) .hero__system.is-in [data-slide] { opacity: 0; }
.hero__title .glyph { transition: transform 1.4s var(--ease) 1.3s, opacity .8s 1.1s; }
.js .hero__title .glyph { opacity: 0; transform: rotate(-120deg) scale(.3); }
.js.is-ready .hero__title.is-in .glyph { opacity: 1; transform: none; }
.hero__plus { position: absolute; z-index: 1; width: 12px; height: 12px; opacity: .85; }
.hero__plus::before, .hero__plus::after { content: ""; position: absolute; background: var(--purple-light); }
.hero__plus::before { left: 5px; top: 0; width: 2px; height: 12px; } .hero__plus::after { top: 5px; left: 0; height: 2px; width: 12px; }
.js .hero__plus { opacity: 0; transition: opacity 1s 1.8s; } .js.is-ready .hero__plus { opacity: .85; }

/* character-by-character reveal */
.chars .word { display: inline-block; white-space: nowrap; }
.chars .char { display: inline-block; }
.js .chars .char { opacity: 0; transform: translateY(.7em) rotate(4deg); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--c, 0) * 22ms); }
.js.is-ready .chars.is-in .char { opacity: 1; transform: none; }

/* rolling digits (odometer) */
.odo { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.odo__col { display: block; height: 1em; overflow: hidden; }
.odo__strip { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.6s var(--ease-io); transition-delay: calc(var(--k, 0) * 120ms); }
.odo__strip span { display: block; height: 1em; line-height: 1; }

/* scroll-driven image parallax */
[data-parallax] { will-change: transform; }

/* 3D client carousel: logos on a rotating ring (same geometry as the reference's "3D Carousel") */
.clients { overflow: hidden; }
.coverflow { position: relative; margin-top: clamp(1rem, 3vw, 2.5rem); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; outline-offset: 6px; }
.coverflow.is-dragging { cursor: grabbing; }
.coverflow__stage { position: relative; height: clamp(210px, 22vw, 300px); perspective: 1700px; }
.coverflow__ring { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; transform-style: preserve-3d; will-change: transform; }
.cf-item { position: absolute; left: 0; top: 0; width: clamp(170px, 18vw, 270px); height: 110px; display: grid; place-items: center; backface-visibility: visible; -webkit-backface-visibility: visible; transform-origin: center; will-change: filter, opacity; }
.cf-item img { max-width: 82%; max-height: 62px; width: auto; height: auto; pointer-events: none; -webkit-user-drag: none; }
/* drag hint - arrows pulse in opposite directions, the hand sways (exact artwork + timing of the reference) */
.coverflow__hint { display: flex; align-items: center; justify-content: center; gap: 11px; color: #cccccc; margin-top: 1.2rem; transform: scale(1.05); pointer-events: none; transition: opacity .3s; }
.coverflow__hint .hint-l { transform-origin: right center; animation: hintL 2s ease-in-out infinite; }
.coverflow__hint .hint-r { transform-origin: left center; animation: hintR 2s ease-in-out infinite; }
.coverflow__hint .hint-hand { display: flex; align-items: center; animation: hintHand 2s ease-in-out infinite; }
@keyframes hintL { 0%, 100% { transform: scale(1); } 50% { transform: scale(.6); } }
@keyframes hintR { 0%, 100% { transform: scale(.6); } 50% { transform: scale(1); } }
@keyframes hintHand { 0%, 100% { transform: translateX(-8px) rotate(-10deg); } 50% { transform: translateX(8px) rotate(10deg); } }
.coverflow:hover .coverflow__hint, .coverflow:focus-within .coverflow__hint { opacity: 0; }
.coverflow.is-touched .coverflow__hint { display: none; }
@media (max-width: 768px) { .coverflow__hint .hint-l, .coverflow__hint .hint-r { width: 20px; height: 10px; } .coverflow__hint .hint-hand svg { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .coverflow__hint * { animation: none !important; } }
.coverflow__cap { text-align: center; margin-top: 3.4rem; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink-3); line-height: 1.4; }

/* work index: covers stack as you scroll */
.covers .cover-card { position: sticky; top: 0; min-height: 100svh; margin-top: 0; }
.covers .cover-card + .cover-card { box-shadow: 0 -30px 60px rgba(0,0,0,.45); }
.cover-card__inner { display: grid; place-items: center; transform: scale(calc(1 - var(--p, 0) * .06)); opacity: calc(1 - var(--p, 0) * .5); will-change: transform; }
.cover-card__img img { transform: scale(calc(1.04 + var(--p, 0) * .04)); }

/* services panel: big name overlaps the neighbouring column */
.services__panel { overflow: visible; }
.services__slide { overflow: visible; }
.services__art { overflow: hidden; }
.services__name { left: -9%; max-width: none; }
@media (max-width: 960px) { .services__name { left: 1rem; max-width: 8ch; } }
.services__nav button { position: relative; }
.services__nav button::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); transform: translateY(-50%) scale(0); transition: transform .3s var(--ease); }
.services__nav button[aria-selected="true"]::before { transform: translateY(-50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  html.js body::before { display: none; }
  html.js .site-header { opacity: 1; transform: none; }
  .js .chars .char, .js .hero__title .glyph, .js .hero__plus { opacity: 1 !important; transform: none !important; }
  .cover-card__inner { transform: none; opacity: 1; }
}

/* 24 Fidelity pass (from frame-by-frame study of the live reference) ------- */
/* hero: headline first, then the small copy, then the background reveals */
.js .hero__top, .js .hero__lead, .js .hero__side { opacity: 0; transition: opacity 1.1s var(--ease) 1.4s; }
.js.is-ready .hero__top, .js.is-ready .hero__lead, .js.is-ready .hero__side { opacity: 1; }
.js .hero__bg { opacity: 0; transition: opacity 2s var(--ease) 1.3s; }
.js.is-ready .hero__bg { opacity: 1; }
.js .hero__system [data-draw], .js .hero__system [data-pop], .js .hero__system [data-slide] { transition-delay: calc(var(--d, 0ms) + 1.5s); }
.js .hero__list[data-reveal] { transition-delay: 0s; }
.hero__lead[data-reveal] { transform: none; }

/* nav: text rolls up on hover (Spector "Mask / Default" menu items) */
.roll { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: bottom; }
.roll > span { display: block; transition: transform .5s var(--ease); }
.roll > span + span { color: var(--purple-light); }
.nav__link:hover .roll > span, .nav__item.is-open > .nav__link .roll > span { transform: translateY(-100%); }
.nav__link:hover { color: #fff; }

/* hairlines under stagger headings draw in left to right (Spector "Line Animation") */
.stagger__row { border-bottom: 0; position: relative; }
.stagger__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-light); transform-origin: left; }
.stagger__row:last-child::after { display: none; }
.section--dark .stagger__row::after { background: var(--line-dark); }
.js .stagger .stagger__row::after { transform: scaleX(0); transition: transform 1.3s var(--ease) calc(var(--i, 0) * 120ms + 350ms); }
.js.is-ready .stagger.is-in .stagger__row::after { transform: scaleX(1); }

/* sections that slide over a pinned one (Spector Showreel / Testimonial) */
main > section, main > div, main > a { position: relative; }
.feature { position: sticky; top: 0; }
.feature + .section { z-index: 2; }
.feature__img img { transition: none; }
@media (max-width: 760px) { .feature { position: relative; } }

/* 25 Remaining motion ------------------------------------------------------- */
/* services: dark picture panel, title turns white where it overlaps it */
.services__panel { background: #0d0e13; border-radius: 4px; }
.services__name { color: var(--ink); }
.services__name--in { position: absolute; z-index: 2; color: #fff; left: -9%; top: 1.2rem; margin: 0; }
.services__art { border-radius: 4px; }
.services__caption { color: rgba(255,255,255,.72); }
.services__progress { background: rgba(255,255,255,.2); }
.services__progress i { background: #fff; }
@media (max-width: 960px) { .services__name--in { left: 1rem; } }
.services__slide .services__art svg { transition: transform 1.4s var(--ease); transform: scale(1.06); }
.services__slide.is-active .services__art svg { transform: scale(1); }

/* hero particle field */

.hero__side { display: flex; flex-direction: column; align-items: center; gap: .9rem; writing-mode: horizontal-tb; transform: none; }
.hero__side span { writing-mode: vertical-rl; transform: rotate(180deg); }
.hero__barcode { width: 18px; height: 46px; opacity: .7; }
.toggle-dot::before { animation: dotL 4.5s var(--ease-io) infinite; }
.toggle-dot::after { animation: dotR 4.5s var(--ease-io) infinite; }
@keyframes dotL { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(20px); } 100% { transform: none; } }
@keyframes dotR { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(-20px); } 100% { transform: none; } }

/* lanyard / badge card */
.award { display: grid; grid-template-columns: 1.1fr .7fr 1.3fr; margin-top: clamp(2rem, 4vw, 4rem); border-radius: 18px; overflow: hidden; background: var(--paper); }
.award__main { background: var(--purple); color: #fff; padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; min-height: 340px; }
.award__kicker { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.04em; }
.award__main h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; }
.award__main p { opacity: .85; max-width: 30ch; letter-spacing: -0.02em; }
.btn--on-color { background: #fff; color: var(--ink); border-color: #fff; align-self: flex-start; }
.btn--on-color:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.award__badge { background: var(--purple); position: relative; display: grid; justify-items: center; overflow: hidden; }
.lanyard { position: relative; width: 150px; transform-origin: 50% -20px; animation: swing 5.5s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.lanyard__strap { display: block; width: 14px; height: 70px; margin: -20px auto 0; background: linear-gradient(90deg, #0b0b0e, #26262e); }
.lanyard__clip { display: block; width: 22px; height: 30px; margin: -2px auto 0; border: 3px solid #cfcfd6; border-radius: 6px; }
.lanyard__card { margin-top: -6px; background: #0b0b0e; color: #fff; border-radius: 12px; padding: 1.2rem 1rem; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; box-shadow: 0 24px 40px rgba(0,0,0,.35); }
.lanyard__card b { font-size: 1rem; letter-spacing: -0.03em; line-height: 1.15; }
.lanyard__card svg { width: 38px; height: 38px; }
.award__list { padding: clamp(1rem, 2vw, 1.6rem) clamp(1.2rem, 2.4vw, 2rem); display: grid; align-content: center; }
.award__list li { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line-light); }
.award__list li:last-child { border-bottom: 0; }
.award__list b { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.04em; color: var(--ink-2); }
.award__list span { color: var(--ink-3); font-size: .92rem; letter-spacing: -0.015em; }
@media (max-width: 960px) { .award { grid-template-columns: 1fr; } .award__badge { min-height: 280px; } .award__list li { grid-template-columns: 1fr; gap: .3rem; } }

/* buttons: arrow slides through (Spector "Arrow 1 / Arrow 2" mask) */
.btn__arrow { width: 2.2rem; height: 14px; background: none; overflow: hidden; position: relative; }
.btn__arrow::before, .btn__arrow::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 14' fill='none' stroke='%23900fff' stroke-width='1.3'%3E%3Cpath d='M0 7h35M29 1l6 6-6 6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: transform .55s var(--ease); }
.btn__arrow::after { transform: translateX(-130%); }
.btn:hover .btn__arrow { width: 2.2rem; }
.btn:hover .btn__arrow::before { transform: translateX(130%); }
.btn:hover .btn__arrow::after { transform: none; }
.btn--on-color .btn__arrow::before, .btn--on-color .btn__arrow::after { filter: none; }

/* stats rows: ticks and rules grow in */
.js .number::before { transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease) .15s; }
.js .number::after { height: 0; transition: height .9s var(--ease) .6s; }
.js.is-ready .number.is-in::before { transform: scaleY(1); }
.js.is-ready .number.is-in::after { height: 1.6rem; }

/* process carousel: soft edge fades + drag cursor */
.carousel::before, .carousel::after { content: ""; position: absolute; top: 0; bottom: 3.4rem; width: clamp(10px, 2vw, 40px); z-index: 2; pointer-events: none; }
.carousel::before { left: 0; background: linear-gradient(90deg, var(--white), rgba(255,255,255,0)); }
.carousel::after { right: 0; background: linear-gradient(270deg, var(--white), rgba(255,255,255,0)); }
.carousel__track { cursor: grab; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.carousel__track.is-dragging .step { pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .lanyard, .toggle-dot::before, .toggle-dot::after { animation: none; } }
.hero__side { top: calc(100svh - 19rem); bottom: auto; }
.services__name { z-index: 0; }
.services__art { z-index: 1; }
.services__num, .services__progress, .services__caption { z-index: 3; }

/* 26 Reel, beliefs, tagline, image reveals ---------------------------------- */

/* brand reel: pinned generative "video" */
.reel { position: sticky; top: 0; min-height: 100svh; background: #06050b; color: #fff; overflow: hidden; isolation: isolate; display: grid; }
.reel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.reel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 50%, rgba(5,6,9,0) 30%, rgba(5,6,9,.75) 100%); pointer-events: none; }
.reel__inner { display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--bar-h) + 2rem) clamp(1.2rem, 6vw, 8rem) clamp(1.5rem, 4vw, 3rem); }
.reel__top { display: flex; justify-content: space-between; align-items: flex-start; }
.reel__brand { font-size: 1.1rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.reel__brand small { display: block; letter-spacing: -0.01em; text-transform: none; font-size: .8rem; opacity: .8; margin-top: .15rem; }
.reel__count { font-family: var(--ff-mono); font-size: .85rem; opacity: .8; }
.reel__words { position: relative; display: grid; place-items: center; text-align: center; }
.reel__word { grid-area: 1 / 1; font-size: clamp(3rem, 1rem + 11vw, 13rem); font-weight: 700; letter-spacing: -0.07em; line-height: .9; text-transform: uppercase; opacity: 0; transform: translateY(40px) scale(.96); filter: blur(10px); transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); }
.reel__word.is-on { opacity: 1; transform: none; filter: none; }
.reel__word:nth-child(odd) { color: var(--cream); } .reel__word:nth-child(even) { color: var(--purple-light); }
.reel__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.5rem; border-top: 1px solid rgba(255,255,255,.35); padding-top: 1.1rem; }
.reel__note { justify-self: end; max-width: 36ch; font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; }
.reel__btn { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); display: grid; place-items: center; transition: background .3s, transform .3s var(--ease); }
.reel__btn:hover { background: rgba(144,15,255,.6); transform: scale(1.08); }
.reel__btn svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.reel__btn .i-play { display: none; } .reel__btn[aria-pressed="true"] .i-play { display: block; } .reel__btn[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 760px) { .reel { position: relative; } .reel__bottom { grid-template-columns: 1fr auto; } .reel__note { display: none; } }

/* beliefs: pinned dark layer with quote slider (Spector "Testimonial") */
.belief-pin { position: sticky; top: 0; min-height: 100svh; background: #0e0e12; color: var(--on-dark); display: grid; align-items: center; padding-block: calc(var(--bar-h) + 2rem) 3rem; overflow: hidden; isolation: isolate; }

.belief-pin .center-head .h2 { color: var(--cream); }

  

 
@keyframes rise { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

@media (max-width: 860px) { .belief-pin { position: relative; }   }

/* image wipe reveal (stand-in for Spector's image effect) */
.js .img-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-io); }
.js .img-reveal > img { transform: scale(1.3); transition: transform 1.8s var(--ease); }
.js.is-ready .img-reveal.is-in { clip-path: inset(0 0 0 0); }
.js.is-ready .img-reveal.is-in > img { transform: scale(1); }
.js .tile.img-reveal.is-in:hover > img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .reel__word { transition: none; }  }

 
.lanyard__card img.n { width: 46px; height: auto; }

/* physics lanyard (js/lanyard.js): rope drawn as SVG, card follows the rope end */
.award__badge.is-phys { min-height: 340px; opacity: 1; }
.is-phys .lanyard__rope { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .4s; }
.is-phys .lanyard__rope path { fill: none; stroke: #121216; stroke-width: 14; stroke-linejoin: round; }
.is-phys .lanyard { position: absolute; left: 0; top: 0; width: 150px; margin: 0; animation: none; transform-origin: 0 0; opacity: 0; transition: opacity .4s; will-change: transform; }
.is-phys.is-live .lanyard, .is-phys.is-live .lanyard__rope { opacity: 1; }
.is-phys .lanyard__strap { display: none; }
.is-phys .lanyard__clip { position: absolute; left: 50%; top: -26px; margin: 0 0 0 -11px; z-index: 1; }
.is-phys .lanyard__card { margin: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.is-phys.is-grab .lanyard__card { cursor: grabbing; }
.is-phys .lanyard__card img { pointer-events: none; -webkit-user-drag: none; }

/* 27 Hero: interactive mesh over our own hero artwork (behaviour as on Spector) ---- */
.hero__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.hero__word { position: absolute; left: 0; top: 0; font: 500 18px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; color: #fff; white-space: nowrap; opacity: 0; transition: opacity .3s ease; will-change: transform; text-shadow: 0 0 14px rgba(144,15,255,.55); pointer-events: none; }
.hero__word.is-on { opacity: .9; }
.hero__word .w { position: absolute; left: 0; top: 0; opacity: 0; transform: translate3d(0, 7px, 0); transition: opacity .2s ease-out, transform .24s cubic-bezier(.2,.8,.2,1); }
.hero__word .w.on { opacity: 1; transform: none; }
.hero__word .w:not(.on) { transform: translate3d(0, -7px, 0); } to { opacity: 1; filter: none; } }
.js .hero__mesh { opacity: 0; transition: opacity 1s ease-out 3s; }
.js.is-ready .hero__mesh { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .hero__mesh { opacity: 1; transition: none; } }
@media (max-width: 800px) { .hero__side { display: none; } }

.hero__title .line > span { will-change: transform; backface-visibility: hidden; }
.hero__system { will-change: opacity; transform: translateZ(0); }

/* 28 Services slide change: one slide leaves, then the next arrives (no overlapping titles) */
.services__slide { transition: opacity .22s ease, visibility 0s linear .22s; }
.services__slide.is-active { transition: opacity .4s ease .22s, visibility 0s linear 0s; }
.services__slide.is-active > .services__name, .services__slide.is-active .services__name--in { animation: svcName .7s var(--ease) .24s both; }
.services__slide.is-active > .services__num, .services__slide.is-active > .services__caption { animation: svcFade .6s var(--ease) .38s both; }
@keyframes svcName { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes svcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .services__slide, .services__slide.is-active { transition: none; } .services__slide.is-active > * , .services__slide.is-active .services__name--in { animation: none !important; } }

/* AI section: numbered accordion with progress line + orbit artwork (Spector "Services" behaviour) */
.stagger__row--accent span, .section--dark .stagger__row--accent span { color: var(--purple-light); }
.aix-title { margin-top: clamp(1.5rem, 3vw, 3rem); }
.aix { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

@media (max-width: 960px) { .aix { grid-template-columns: 1fr; }  }

/* Industries: expanding panels */
.indx { display: flex; gap: 8px; height: clamp(400px, 38vw, 500px); margin-top: clamp(2rem, 4vw, 4rem); }
.indx__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 14px; background: var(--paper); color: var(--ink-2); cursor: pointer; outline-offset: 3px; transition: flex-grow .8s var(--ease), background .5s, color .5s; }
.indx__item.is-active { flex-grow: 3.4; background: var(--purple); color: #fff; }
.indx__item:not(.is-active):hover { background: #e6e1d8; }
.indx__item small { position: absolute; left: 1.4rem; top: 1.3rem; font-family: var(--ff-mono); font-size: .8rem; color: var(--purple); transition: color .5s; }
.indx__item.is-active small { color: #fff; }
.indx__item h3 { position: absolute; left: calc(1.4rem + 1.8rem); bottom: 1.4rem; width: max-content; max-width: 340px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; white-space: nowrap; transform-origin: 0 100%; transform: rotate(-90deg); transition: transform .8s var(--ease), left .8s var(--ease), bottom .8s var(--ease); }
.indx__item.is-active h3 { left: 1.4rem; bottom: 1.4rem; transform: none; white-space: normal; }
.indx__item p { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 5.6rem; max-width: 34ch; letter-spacing: -0.02em; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .6s var(--ease); pointer-events: none; }
.indx__item.is-active p { opacity: .92; transform: none; transition: opacity .5s .3s, transform .7s var(--ease) .3s; }
.indx__mark { position: absolute; right: 1.2rem; top: 1.1rem; width: 2.2rem; height: 1.4rem; background: url("../images/brand/novva-n-light.svg") center / contain no-repeat; opacity: 0; transition: opacity .5s; }
.indx__item.is-active .indx__mark { opacity: 1; }
@media (max-width: 860px) {
  .indx { flex-direction: column; height: auto; }
  .indx__item, .indx__item.is-active { flex: none; padding: 3.2rem 1.4rem 1.6rem; background: var(--paper); color: var(--ink-2); }
  .indx__item.is-active { background: var(--purple); color: #fff; }
  .indx__item h3, .indx__item.is-active h3 { position: static; transform: none; white-space: normal; width: auto; max-width: none; }
  .indx__item p { position: static; opacity: .9; transform: none; max-width: none; margin-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .indx__item, .indx__item h3, .indx__item p { transition: none; } }

/* Industries: smoother motion, light grey inactive cards, hero look (dark base + purple glow) on the open card */
.indx { --indx-ease: cubic-bezier(.65, 0, .35, 1); }
.indx__item { background: #ececef; color: var(--ink-2); will-change: flex-grow; transition: flex-grow 1s var(--indx-ease), background-color .6s, color .8s var(--indx-ease); }
.indx__item::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--indx-ease);
  background: radial-gradient(70% 60% at 82% 18%, rgba(144,15,255,.62), rgba(144,15,255,0) 70%), radial-gradient(60% 50% at 8% 100%, rgba(144,15,255,.3), rgba(144,15,255,0) 70%), linear-gradient(180deg, #07070b 0%, #050609 55%, #08050f 100%); }
.indx__item > * { z-index: 1; }
.indx__item.is-active { background: #ececef; color: #fff; }
.indx__item.is-active::before { opacity: 1; }
.indx__item:not(.is-active):hover { background: #e2e2e7; }
.indx__item small { color: var(--purple); transition: color .8s var(--indx-ease); }
.indx__item.is-active small { color: #fff; }
.indx__item h3 { left: 1.4rem; font-size: clamp(1.2rem, .6rem + 1.4vw, 1.6rem); white-space: nowrap; max-width: none; transform: translateX(1.9rem) rotate(-90deg); transition: transform 1s var(--indx-ease); }
.indx__item.is-active h3 { left: 1.4rem; bottom: 1.4rem; white-space: nowrap; transform: none; }
.indx__item p { transition: opacity .35s ease, transform .8s var(--indx-ease); }
.indx__item.is-active p { transition: opacity .6s ease .35s, transform .9s var(--indx-ease) .3s; }
.indx__mark { display: none; }
.indx__fx { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s var(--indx-ease) .2s; }
.indx__item.is-active .indx__fx { opacity: 1; }
.indx__fx canvas { display: block; }
.indx__fx .hero__word { text-shadow: 0 0 14px rgba(144,15,255,.55); }
@media (max-width: 860px) {
  .indx__item, .indx__item.is-active { background: #ececef; color: var(--ink-2); }
  .indx__item.is-active { background: linear-gradient(180deg, #07070b, #08050f); color: #fff; }
  .indx__item h3, .indx__item.is-active h3 { white-space: normal; transform: none; }
}

/* 29 Home Insights - Spector "Lab" rows (white text card + large image), compact heading */

/* AI section as an "expertise" explorer (Spector Services layout): list · dark card · side card */
.exp { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.9fr) minmax(220px, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch; min-height: 560px; }

@media (max-width: 1100px) { .exp { grid-template-columns: minmax(170px, .9fr) minmax(0, 1.6fr); }  }
@media (max-width: 760px) {
  .exp { grid-template-columns: 1fr; min-height: 0; }
   
  
  
}

/* 30 Insights: rows stack as you scroll + a "Read" bubble follows the cursor */

.read-cursor { position: fixed; left: 0; top: 0; z-index: 70; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-size: .95rem; font-weight: 600; letter-spacing: -0.02em; pointer-events: none; opacity: 0; transform: translate3d(-200px,-200px,0) scale(.4); transition: opacity .25s ease; will-change: transform; }
.read-cursor.is-on { opacity: 1; }
.read-cursor span { display: inline-flex; align-items: center; gap: .35rem; }
.read-cursor svg { width: 18px; height: 9px; }
@media (hover: none), (max-width: 860px) { .read-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {  .read-cursor { display: none; } }
/* home Insights rows: about 75% of the previous height */

/* 31 Services dropdown - two-column mega menu, opaque so the page never shows through */
.menu { width: min(780px, 92vw); padding: 18px 18px 14px; border-radius: 20px; background: rgba(13, 14, 19, .985); backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4); top: calc(100% + 12px); }
.menu::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; background: rgba(13,14,19,.985); border-left: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1); transform: translateX(-50%) rotate(45deg); }
.menu__head { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-dark-2); padding: .2rem .9rem .9rem; }
.menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu .menu__link { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: .8rem; padding: 1rem .9rem 1.05rem; border-radius: 14px; overflow: hidden; transition: background .3s; }
.menu .menu__link::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--purple); transform: scaleY(0); transition: transform .35s var(--ease); }
.menu .menu__link:hover, .menu .menu__link:focus-visible { background: rgba(255,255,255,.06); }
.menu .menu__link:hover::before, .menu .menu__link:focus-visible::before { transform: scaleY(1); }
.menu__num { padding-top: .22rem; }
.menu__txt { display: grid; gap: .3rem; min-width: 0; }
.menu__title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--cream); transition: color .25s; }
.menu__desc { font-size: .85rem; line-height: 1.4; color: var(--on-dark-2); letter-spacing: -0.01em; }
.menu__go { color: var(--on-dark-2); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .4s var(--ease), color .3s; padding-top: .35rem; }
.menu__go svg { width: 24px; height: 12px; display: block; }
.menu .menu__link:hover .menu__go, .menu .menu__link:focus-visible .menu__go { opacity: 1; transform: none; color: var(--purple-light); }
.menu .menu__link:hover .menu__title { color: #fff; }
.menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 10px; padding: 14px .9rem 4px; border-top: 1px solid rgba(255,255,255,.1); }
.menu .menu__all { display: inline-flex; gap: .5rem; padding: 0; margin: 0; border: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--purple-light); transition: gap .3s var(--ease), color .2s; }
.menu .menu__all:hover { gap: .85rem; color: #fff; }
.menu__cta { background: var(--purple); color: #fff; padding: .65rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: .95rem; letter-spacing: -0.02em; transition: background .25s; }
.menu__cta:hover { background: var(--purple-deep); }
/* items rise in one after another when the menu opens */
.nav__item.is-open .menu .menu__link { animation: menuIn .5s var(--ease) both; animation-delay: calc(var(--k, 0) * 45ms + 60ms); }
@keyframes menuIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav__item.is-open .menu .menu__link { animation: none; } }

/* Insights page uses the same stacking rows as the home Insights section */

/* 32 Insights hero: line-by-line headline, facts row and the interactive mesh */
.page-hero--fx .split .line { display: block; overflow: hidden; padding-bottom: .06em; }
.page-hero--fx .split .line > span { display: block; }
.page-hero--fx .h1 { max-width: none; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.4rem 3.2rem; margin-top: clamp(2rem, 4vw, 3.4rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.hero-meta li { display: grid; gap: .25rem; }
.hero-meta b { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--cream); }
.hero-meta li > span { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-dark-2); }
.hero-meta__chips { display: flex !important; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.page-hero .chip { border-color: var(--line-dark); color: var(--on-dark); font-size: .8rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
@media (max-width: 760px) { .hero-meta__chips { margin-left: 0; } }

/* 33 Insights hero, part 2: tilting latest-article card + article ticker */
.page-hero--fx { padding-bottom: 0; }
.page-hero--fx .wrap { position: relative; padding-bottom: clamp(2rem, 4vw, 3.4rem); }
.hero-feature { position: absolute; right: var(--gutter); top: clamp(1.5rem, 4vw, 4rem); width: clamp(250px, 22vw, 330px); border-radius: 16px; background: rgba(20, 20, 28, .72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; color: #fff; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out, border-color .3s, box-shadow .3s; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); animation: heroBob 6s ease-in-out infinite; z-index: 2; }
.hero-feature:hover { border-color: rgba(178,102,255,.6); box-shadow: 0 40px 90px -30px rgba(144,15,255,.55); animation-play-state: paused; }
@keyframes heroBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.hero-feature__badge { position: absolute; left: .8rem; top: .8rem; z-index: 2; background: var(--purple); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; }

.hero-feature__go { display: inline-flex; align-items: center; gap: .5rem; color: var(--purple-light); font-weight: 600; font-size: .9rem; transition: gap .3s var(--ease); }
.hero-feature:hover .hero-feature__go { gap: .9rem; }
.hero-feature__go svg { width: 22px; height: 11px; }
@media (max-width: 1100px) { .hero-feature { display: none; } }

.hero-ticker { position: relative; overflow: hidden; border-top: 1px solid var(--line-dark); padding-block: 1rem; background: rgba(5,6,9,.55); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hero-ticker__track { display: flex; align-items: center; gap: 2.6rem; width: max-content; animation: heroTick 55s linear infinite; padding-right: 2.6rem; }
.hero-ticker:hover .hero-ticker__track { animation-play-state: paused; }
.hero-ticker li { display: inline-flex; align-items: center; gap: .8rem; white-space: nowrap; font-size: .95rem; letter-spacing: -0.02em; color: var(--on-dark-2); }
.hero-ticker li b { color: var(--purple-light); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.hero-ticker .mark { width: 1.2rem; height: .75rem; }
@keyframes heroTick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-feature { animation: none; } .hero-ticker__track { animation: none; flex-wrap: wrap; width: auto; } }

/* 34 Every page hero: word-by-word headline, mesh, facts row */
.w-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .09em; margin-bottom: -.09em; }
.w-in { display: inline-block; }
.js .w-in { transform: translateY(112%); }
.js.is-ready .w-in { transform: none; transition: transform 1.1s var(--ease) calc(var(--wi, 0) * 75ms + 250ms); }
.page-hero--fx .h1[data-rise] { overflow: visible; }
.hero-meta__chips a.chip { transition: border-color .25s, color .25s, background .25s; }
.hero-meta__chips a.chip:hover { border-color: var(--purple-light); color: #fff; background: rgba(144,15,255,.28); }
.err-hero.page-hero--fx { padding-bottom: 0; }
.case-hero > .hero__media { z-index: -1; }
@media (prefers-reduced-motion: reduce) { .js .w-in, .js.is-ready .w-in { transform: none; transition: none; } }

/* wider gaps between words in the big headings (tight letter-spacing made words run together) */
.stagger__row span { word-spacing: .15em; }
.hero__title .line > span { word-spacing: .16em; }
.page-hero .h1.split .line > span, .page-hero--fx .h1 .line > span { word-spacing: .16em; }
.process__head .h2, .call__title { word-spacing: .12em; }

/* 35 "What we deliver" capability explorer */
.capx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.capx__bar { position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--purple); border-radius: 0 3px 3px 0; transition: transform .55s var(--ease), height .55s var(--ease); z-index: 1; }

.capx__panel { grid-area: 1 / 1; position: relative; padding: clamp(1.6rem, 3vw, 3rem); min-height: clamp(360px, 36vw, 480px); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
.capx__panel.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease .22s, visibility 0s; }

@media (max-width: 860px) { .capx { grid-template-columns: 1fr; } .capx__panel { min-height: 0; }  }
@media (prefers-reduced-motion: reduce) { .capx__panel, .capx__panel.is-active, .capx__bar { transition: none; } .capx__panel.is-active * { animation: none !important; } }

/* Industries: keep card contents from reflowing while a card widens/narrows */
.indx__item { contain: layout paint; }
.indx__item p { right: auto; width: 34ch; max-width: none; }
@media (max-width: 1100px) { .indx__item p { width: 26ch; } }
@media (max-width: 860px) { .indx__item { contain: none; } .indx__item p { width: auto; } }

/* Industries: everything below follows one progress value (--p: 0 folded .. 1 open) that js/industries.js drives with a spring,
   so the width, title rotation, text, purple fade and mesh fade stay perfectly in sync and never restart when you move across cards. */
.indx__item { --p: 0; }
.indx__item.is-active { --p: 1; }
.indx .indx__item { transition: background-color .35s ease; }
.indx .indx__item::before,
.indx .indx__item.is-active::before { transition: none; opacity: var(--p); }
.indx .indx__item small { transition: none; }
.indx .indx__item h3,
.indx .indx__item.is-active h3 { transition: none; left: 1.4rem; bottom: 1.4rem; white-space: nowrap; transform: translateX(calc(1.9rem * (1 - var(--p)))) rotate(calc(-90deg * (1 - var(--p)))); }
.indx .indx__item p,
.indx .indx__item.is-active p { transition: none; opacity: clamp(0, calc((var(--p) - .6) * 2.5), .92); transform: translateY(calc((1 - var(--p)) * 16px)); }
.indx .indx__item .indx__fx,
.indx .indx__item.is-active .indx__fx { transition: none; opacity: clamp(0, calc((var(--p) - .3) * 1.5), 1); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .indx .indx__item,
  .indx .indx__item.is-active { color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--ink-2)); }
  .indx .indx__item small,
  .indx .indx__item.is-active small { color: color-mix(in srgb, #fff calc(var(--p) * 100%), var(--purple)); }
}
@media (max-width: 860px) {
  .indx .indx__item h3, .indx .indx__item.is-active h3 { position: static; transform: none; white-space: normal; }
  .indx .indx__item p, .indx .indx__item.is-active p { position: static; opacity: .9; transform: none; }
  .indx .indx__item .indx__fx, .indx .indx__item.is-active .indx__fx { opacity: var(--p); }
}
@media (prefers-reduced-motion: reduce) { .indx .indx__item { transition: none; } }

/* Industries v2: the open card fills from the bottom, the title swaps vertical -> horizontal with a word-by-word masked rise,
   a ghost number slides in, and closed cards get a cursor-following spotlight. All of it follows --p (0..1) from the spring. */
.indx .indx__item::before,
.indx .indx__item.is-active::before { opacity: 1; clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); }
.indx .indx__item small,
.indx .indx__item.is-active small { color: color-mix(in srgb, #fff calc(var(--p) * var(--p) * 100%), var(--purple)); opacity: clamp(0, calc(1 - (var(--p) - .25) * 3), 1); }

/* vertical label (folded) */
.indx__vt { position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 1; width: max-content; font-size: clamp(1.2rem, .6rem + 1.4vw, 1.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; white-space: nowrap; transform-origin: 0 100%; transform: translateX(1.9rem) rotate(-90deg); opacity: clamp(0, calc(1 - var(--p) * 3.2), 1); pointer-events: none; }

/* horizontal title (open): words rise from behind a mask, one after another */
.indx .indx__item h3,
.indx .indx__item.is-active h3 { transform: none; opacity: 1; }
.indx__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.indx__w > span { display: inline-block; transform: translateY(calc((1 - clamp(0, (var(--p) - .3 - var(--i) * .11) * 3.2, 1)) * 112%)); }

/* ghost number */
.indx__no { position: absolute; right: 1.1rem; top: .5rem; z-index: 1; font-size: clamp(4rem, 3rem + 4vw, 7rem); font-weight: 600; letter-spacing: -0.07em; line-height: 1; color: rgba(255,255,255,.13); opacity: clamp(0, calc((var(--p) - .45) * 2.2), 1); transform: translateY(calc((1 - var(--p)) * -28px)); pointer-events: none; }

/* spotlight that follows the cursor on folded cards */
.indx .indx__item::after { display: block; content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(144,15,255,.2), rgba(144,15,255,0) 70%); }
.indx .indx__item:not(.is-active)::after { opacity: var(--hov, 0); }

@media (max-width: 860px) {
  .indx__vt { display: none; }
  .indx__w > span { transform: none; }
  .indx__no { opacity: 1; transform: none; font-size: 4rem; color: rgba(255,255,255,.14); }
  .indx .indx__item:not(.is-active) .indx__no { color: rgba(11,11,14,.08); }
  .indx .indx__item::before, .indx .indx__item.is-active::before { clip-path: none; opacity: var(--p); }
}
@media (prefers-reduced-motion: reduce) { .indx .indx__item::after { transition: none; } }
.indx__w { margin-right: .26em; }
.indx__w:last-child { margin-right: 0; }
@media (max-width: 860px) { .indx .indx__item h3, .indx .indx__item.is-active h3, .indx .indx__item p, .indx .indx__item.is-active p { position: relative; z-index: 1; } }
@media (max-width: 860px) { .indx .indx__item h3, .indx .indx__item.is-active h3, .indx .indx__item p, .indx .indx__item.is-active p { left: auto; right: auto; top: auto; bottom: auto; width: auto; } }

/* 36 Performance ------------------------------------------------------------
   - sections that are off-screen (or pinned and already covered) get .is-off: their infinite animations pause
   - no backdrop-filter on surfaces that sit over scrolling content (it re-blurs every frame while scrolling)
   - no mask on an element whose child animates; no filter on big layers that change on scroll              */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
.site-header.is-solid .site-header__bar { background: rgba(34, 37, 40, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-feature { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 20, 28, .92); }
.hero-ticker { -webkit-mask-image: none; mask-image: none; }
.hero-ticker::before, .hero-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 2; pointer-events: none; }
.hero-ticker::before { left: 0; background: linear-gradient(90deg, #06060a, rgba(6,6,10,0)); }
.hero-ticker::after { right: 0; background: linear-gradient(270deg, #06060a, rgba(6,6,10,0)); }

.hero__title .line > span { will-change: auto; }
.hero__system { will-change: auto; transform: none; }

/* 37 Home hero photo: the neon "creative algorithm" image on the right, faded into the dark so the text stays readable */
.hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: min(74%, 1250px); z-index: -1; overflow: hidden; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(5,6,9,.28), rgba(5,6,9,.28)),
    linear-gradient(90deg, #050609 0%, rgba(5,6,9,.6) 20%, rgba(5,6,9,.12) 50%, rgba(5,6,9,0) 100%),
    linear-gradient(0deg, #050609 0%, rgba(5,6,9,.6) 24%, rgba(5,6,9,0) 55%),
    linear-gradient(180deg, rgba(5,6,9,.45) 0%, rgba(5,6,9,0) 20%); }
.js .hero__photo { opacity: 0; transform: scale(1.08); transition: opacity 2s var(--ease) 1.2s, transform 2.8s var(--ease) 1.2s; }
.js.is-ready .hero__photo { opacity: 1; transform: none; }
@media (max-width: 800px) { .hero__photo { width: 100%; } .hero__photo img { object-position: 66% 30%; } .hero__photo::after { background: linear-gradient(180deg, rgba(5,6,9,.78), rgba(5,6,9,.5) 50%, #050609 100%); } }
@media (prefers-reduced-motion: reduce) { .js .hero__photo { opacity: 1; transform: none; transition: none; } }

/* 38 Hero artwork: orbiting Novva N (replaces the photo; pure SVG + CSS, no image download) */
.hero__orbit { background: radial-gradient(60% 60% at 62% 45%, rgba(144,15,255,.32), rgba(144,15,255,0) 70%); }
.hero__orbit::after { display: none; }
.hero__orbit .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: orbDrift 14s ease-in-out infinite alternate; }
.hero__orbit .orb--a { width: 38vw; height: 38vw; left: 28%; top: -6%; background: #7a2bff; }
.hero__orbit .orb--b { width: 26vw; height: 26vw; right: 2%; bottom: 6%; background: #ff4fa3; opacity: .32; animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes orbDrift { to { transform: translate3d(5%, 8%, 0) scale(1.15); } }
.hero__orbit .orbit { position: absolute; left: 52%; top: 31%; width: min(56vh, 40vw); aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 0 30px rgba(144,15,255,.55)); }

@media (max-width: 800px) { .hero__orbit .orbit { width: 90vw; top: 40%; opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .hero__orbit .orb{ animation: none; } }

/* 39 Hero N: extruded logo mark with pointer tilt and a light sweep */
.hero__orbit .orbit { width: min(54vh, 38vw); top: 31%; left: 45%; transform: translate(-50%, -50%) perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, -14deg)); transition: transform .5s var(--ease); }

@media (max-width: 800px) { .hero__orbit .orbit { width: 78vw; left: 52%; top: 36%; opacity: .55; } }

/* 40 Hero N, simple: flat brand mark, soft glow, slow float (overrides 38/39) */
.hero__orbit .orbit { width: min(44vh, 31vw); top: 32%; left: 42%; transform: translate(-50%, -50%); transition: none; filter: drop-shadow(0 0 50px rgba(144,15,255,.65)); animation: nBob 6s ease-in-out infinite alternate; }
@keyframes nBob { to { transform: translate(-50%, -54%); } }
@media (max-width: 800px) { .hero__orbit .orbit { width: 62vw; left: 52%; top: 34%; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .hero__orbit .orbit { animation: none; } }

/* 41 Our work hero: fanned stack of real project screens */
.hero-stack { position: absolute; z-index: 1; top: 50%; right: 4%; width: min(40vw, 640px); aspect-ratio: 1.15; transform: translateY(-46%); pointer-events: none; perspective: 1400px; }
.hs { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 60px rgba(144,15,255,.22); animation: hsFloat 7s ease-in-out infinite alternate; }
.hs img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hs figcaption { position: absolute; left: .7rem; bottom: .6rem; padding: .25rem .7rem; border-radius: 99px; font-size: .72rem; font-weight: 600; background: rgba(5,6,9,.72); color: #fff; }
.hs--1 { width: 78%; aspect-ratio: 16/8; top: 0; left: 8%; --r: -6deg; --x: 0px; }
.hs--2 { width: 66%; aspect-ratio: 16/8; top: 24%; right: 0; --r: 5deg; animation-delay: -2s; }
.hs--3 { width: 52%; aspect-ratio: 4/3; bottom: 6%; left: 0; --r: -3deg; animation-delay: -4s; }
.hs--4 { width: 34%; aspect-ratio: 1; bottom: 0; right: 6%; --r: 7deg; animation-delay: -1s; }
.hs { transform: rotate(var(--r, 0deg)); }
@keyframes hsFloat { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-14px) rotate(var(--r)); } }
.js .hero-stack .hs { opacity: 0; transition: opacity .9s var(--ease) 1.3s; }
.js.is-ready .hero-stack .hs { opacity: 1; }
.js.is-ready .hero-stack .hs--2 { transition-delay: 1.45s; } .js.is-ready .hero-stack .hs--3 { transition-delay: 1.6s; } .js.is-ready .hero-stack .hs--4 { transition-delay: 1.75s; }
@media (min-width: 981px) { .page-hero--fx:has(.hero-stack) .h1, .page-hero--fx:has(.hero-stack) .lead, .page-hero--fx:has(.hero-stack) .note { max-width: 52%; } }
@media (max-width: 980px) { .hero-stack { position: relative; top: auto; right: auto; width: min(88%, 520px); margin: 2rem auto 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hs { animation: none; } .js .hero-stack .hs { opacity: 1; transition: none; } }
@media (min-width: 981px) { .page-hero--fx:has(.hero-stack) .h1 { font-size: clamp(3rem, 6vw, 5.6rem); } }
@media (max-width: 980px) { .hero-stack { margin: 0 auto 2rem; } }

/* 43 Next project band: original centered strip, shorter */
.next-project { padding: clamp(1.6rem, 3vw, 2.8rem) var(--gutter); }
.next-project .h2 { margin-top: .5rem; font-size: clamp(2rem, 1rem + 3.6vw, 4.2rem); line-height: 1; }

/* 44 Work covers: the active (docked) slide shows its picture at full brightness, no tint. It only darkens as the next slide covers it (--p). */
.covers .cover-card::before { background: radial-gradient(40% 36% at 50% 52%, rgba(0,0,0,.42), rgba(0,0,0,0) 100%); }
.covers .cover-card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #0b0614; opacity: calc(var(--p, 0) * .6); pointer-events: none; }
.covers .cover-card__img img { filter: none; transition: transform 1.6s var(--ease); }
.covers .cover-card:hover .cover-card__img img { filter: none; }
.covers .cover-card__inner { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.65), 0 6px 44px rgba(0,0,0,.55); }
.covers .cover-card__meta { color: #fff; }

/* 45 Work covers: every slide picture shares one scroll-driven tilt + zoom (0 -> 26deg, 1.06x -> 1.9x, reached at 80% of the run), as on Spector /projects.
   With scroll-driven animations this is pure css on the compositor (cannot lag on a fast scroll); other browsers use the js fallback (stackCovers).
   The zoom always covers the rotated corners. No hover zoom and no first-view reveal on these pictures. */
.covers .cover-card__img, .covers .cover-card__img img { transition: none !important; clip-path: none !important; opacity: 1 !important; filter: none; }
.covers .cover-card__img img { transform: scale(1.06); }
@supports (animation-timeline: view()) {
  .covers { view-timeline: --cvs block; }
  .covers .cover-card__img img { transform-origin: 50% 50%; animation: cvTilt linear both; animation-timeline: --cvs; animation-range: cover 0% cover 80%; }
  @keyframes cvTilt { from { transform: rotate(0deg) scale(1.06); } to { transform: rotate(26deg) scale(1.9); } }
}
@media (prefers-reduced-motion: reduce) { .covers .cover-card__img img { animation: none !important; transform: scale(1.06) !important; } }

/* 46 Work covers, crisp hand-over like Spector: no gradients or local shading on the slide (they smudged the seam); one even light tint instead, so the edge between two slides is a clean line. */
.covers .cover-card::before { background: rgba(0, 0, 0, .24); }
.covers .cover-card__inner { text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 26px rgba(0,0,0,.5); }
.covers .cover-card + .cover-card { box-shadow: none; }

/* 47 Work covers: no dimming at all, as on the live Spector page (picture shown exactly as it is). Legibility comes from the text shadow only. */
.covers .cover-card::before { display: none; }
.covers .cover-card__img img { filter: none; }
.covers .cover-card__inner { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.6), 0 4px 46px rgba(0,0,0,.45); }

/* 48 Who we are: clients wall. Cards with a spotlight that follows the pointer, colour logo on hover, case-study link where one exists, and a "your brand?" tile to close the grid. */

/* nine clients + the "your brand" tile = ten cards: five columns on wide screens (2 even rows), two columns below */

/* 49 Who we are: clients as a simple list. Big names in rows; hover shows the logo on a small card that follows the pointer. */

.crow__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; padding: clamp(.9rem, 1.6vw, 1.4rem) 0; color: var(--ink-2); transition: padding .5s var(--ease), color .35s; }

.crow__tip { position: fixed; left: 0; top: 0; z-index: 30; width: 220px; height: 130px; display: grid; place-items: center; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -18px rgba(0,0,0,.35); border: 1px solid var(--line-light); pointer-events: none; opacity: 0; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(.92); transition: opacity .25s, transform .12s linear, scale .3s; }
.crow__tip.is-on { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1); }
.crow__tip img { max-width: 72%; max-height: 62%; width: auto; }
@media (hover: none), (max-width: 760px) {  .crow__tip { display: none; }  .crow__row { grid-template-columns: 2.2rem minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { .crow__row{ transition: none; } }

/* 48 Work slides, legibility + polish. A frosted spotlight behind the text (the picture is blurred and lightly tinted only inside a feathered area, so the rest of the picture stays fully bright), a slide counter and a "View case study" pill. */
.covers .cover-card__inner { position: relative; isolation: isolate; text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.45); }
.covers .cover-card__inner::before { content: ""; position: absolute; z-index: -1; inset: -16% -34%; pointer-events: none; background: rgba(12, 6, 24, .3); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); -webkit-mask-image: radial-gradient(closest-side, #000 48%, transparent 100%); mask-image: radial-gradient(closest-side, #000 48%, transparent 100%); }
.cover-card__n { display: block; margin-bottom: 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.85); }
.cover-card__n b { color: #fff; font-size: 1.05rem; letter-spacing: .04em; }
.cover-card__cta { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.5rem; padding: .5rem .5rem .5rem 1.15rem; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; background: rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: .92rem; text-shadow: none; transition: background .35s var(--ease), color .35s, border-color .35s; }
.cover-card__cta svg { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--purple); color: #fff; transition: transform .45s var(--ease); }
.cover-card:hover .cover-card__cta { background: #fff; color: #0a0710; border-color: #fff; }
.cover-card:hover .cover-card__cta svg { transform: translateX(3px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .cover-card__cta, .cover-card__cta svg { transition: none; } }
.covers .cover-card__inner::before { background: rgba(12, 6, 24, .46); }
.covers .cover-card__inner { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.5); }
.cover-card__cta { background: rgba(12, 6, 24, .62); border-color: rgba(255,255,255,.5); }

/* 37 Light header -----------------------------------------------------------
   white bar with dark text on every page and scroll position; dark logo is set in the HTML */
.site-header { color: var(--ink); }
.site-header__bar, .site-header.is-solid .site-header__bar { background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line-light); }
.site-header .nav__link, .site-header .nav__link:hover { color: var(--ink); }
.site-header .roll > span + span { color: var(--purple); }
.site-header .nav__link::after { background: var(--purple); }
.site-header .menu-toggle span { background: var(--ink); }
.site-header .mark { background-image: url("../images/brand/novva-n-dark.svg"); }
.site-header .logo img { width: 190px; }
@media (max-width: 900px) { .site-header .logo img { width: 150px; } }
:root { --bar-h: 84px; }
@media (max-width: 900px) { :root { --bar-h: 70px; } }

/* 38 Services dropdown: current service page */
.menu .menu__link[aria-current="page"] { background: rgba(144, 15, 255, .16); }
.menu .menu__link[aria-current="page"]::before { transform: scaleY(1); }
.menu .menu__link[aria-current="page"] .menu__title { color: var(--purple-light); }
.menu .menu__link[aria-current="page"] .menu__go { opacity: 1; transform: none; color: var(--purple-light); }