/* =====================================================================
   NoVi landing pages — services, sectors, markets, hubs (stream: services).
   Homepage-v2 design language on the shared design-system tokens
   (--novi-*, --fs-*, --ff-*, --sec-pad; see docs/design-system.md):
   dark editorial grounds, gold hairlines, eyebrow-with-rule + light display
   headings, square frames, image-led sections, gold link-arrows, mega CTA.
   Scope: everything lives under .nl / .nl-* (hero: .nl-hero).
   Motion: transform / opacity / clip-path only; the reveal classes come from
   the shared helpers (novi-rise / novi-unmask via MotionLayer, data-reveal /
   data-count / mb-lift via BoxMotion). Reduced motion = final states.
   ===================================================================== */

.nl {
  --nl-ease: var(--novi-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  --nl-sticky: calc(var(--novi-header-h, 76px) + 28px);
  --nl-card: rgba(var(--novi-fg-rgb), 0.025);
  position: relative;
  color: var(--novi-text);
}
.nl ul, .nl ol { list-style: none; margin: 0; padding: 0; }
.nl figure { margin: 0; }
.nl picture { display: block; }
.nl img { display: block; max-width: none; }

/* ------------------------------------------------------------ sections */
.nl-sec {
  position: relative; isolation: isolate; overflow-x: clip;
  padding: var(--sec-pad) 0; background: var(--novi-bg); color: var(--novi-text);
}
.nl-sec--alt { background: var(--novi-bg-2); }
.nl-sec > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------ type */
.nl-eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0;
  font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow);
  color: var(--novi-gold-hi);
}
.nl-eyebrow::before { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.nl-eyebrow__n { color: var(--novi-muted); font-variant-numeric: tabular-nums; }
.nl-eyebrow__n::after { content: "·"; margin-inline-start: 10px; color: var(--novi-gold); }

.nl .nl-h2 {
  margin: 18px 0 0; max-width: 24ch; color: var(--novi-strong); text-wrap: balance;
  font: 400 var(--fs-h2)/1.12 var(--ff-head); letter-spacing: -0.018em;
}
.nl .nl-h3 { margin: 16px 0 0; color: var(--novi-strong); font: 400 var(--fs-h3)/1.25 var(--ff-head); letter-spacing: -0.01em; }
[dir="rtl"] .nl .nl-h2, [dir="rtl"] .nl .nl-h3 { font-weight: 700; line-height: 1.4; letter-spacing: 0; }

.nl .nl-lead { margin: 22px 0 0; max-width: 62ch; font-size: var(--fs-lead); line-height: 1.7; color: var(--novi-muted); }
.nl-head { max-width: 900px; margin-bottom: clamp(32px, 4.5vw, 64px); }
.nl-head--row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 56px; max-width: none;
}
.nl-head--row > div { max-width: 820px; }

.nl .nl-p { margin: 0 0 1.1em; max-width: 70ch; font-size: var(--fs-body); line-height: 1.8; color: var(--novi-text-2); }
.nl .nl-prose + .nl-prose, .nl .nl-prose + *, .nl * + .nl-prose { margin-top: 26px; }
[dir="rtl"] .nl .nl-p { line-height: 1.95; }
.nl strong { color: var(--novi-strong); font-weight: 600; }
.nl :is(.nl-prose, .nl-list, .nl-cap__text, .nl-callout, .nl-faq__a, .nl-table, .nl-tl__text, .nl-intro__body) a {
  color: var(--novi-gold-hi); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--novi-gold-hi-rgb), 0.4); transition: color 0.3s, text-decoration-color 0.3s;
}
.nl :is(.nl-prose, .nl-list, .nl-cap__text, .nl-callout, .nl-faq__a, .nl-table, .nl-tl__text, .nl-intro__body) a:hover {
  color: var(--novi-strong); text-decoration-color: var(--novi-gold);
}

/* ------------------------------------------------------------ buttons, links, tags, chips */
.nl-arrow { flex: none; transition: transform 0.45s var(--nl-ease, ease); }
[dir="rtl"] .nl-arrow { transform: scaleX(-1); }

.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1.2 var(--ff-body); white-space: nowrap; text-decoration: none !important;
  background: var(--novi-gold); color: var(--novi-on-gold) !important;
  transition: background-color 0.35s var(--novi-ease), color 0.35s, border-color 0.35s;
}
.nl-btn:hover { background: var(--novi-gold-hi); }
.nl-btn:hover .nl-arrow { transform: translateX(4px); }
[dir="rtl"] .nl-btn:hover .nl-arrow { transform: scaleX(-1) translateX(4px); }
.nl-btn.is-ghost { background: transparent; color: var(--novi-strong) !important; border-color: var(--novi-line-2); }
.nl-btn.is-ghost:hover { border-color: var(--novi-gold-hi); color: var(--novi-gold-hi) !important; }

.nl-link {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding-block: 6px;
  font: 600 15px/1.3 var(--ff-body); color: var(--novi-gold-hi) !important; text-decoration: none !important;
}
.nl-link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0.28); transform-origin: left center; transition: transform 0.5s var(--novi-ease);
}
[dir="rtl"] .nl-link::after { transform-origin: right center; }
.nl-link:hover::after, .nl-link:focus-visible::after { transform: scaleX(1); }
.nl-link:hover .nl-arrow { transform: translateX(4px); }
[dir="rtl"] .nl-link:hover .nl-arrow { transform: scaleX(-1) translateX(4px); }

.nl-tag {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; pointer-events: none;
  padding: 5px 10px; border-radius: 999px; background: rgba(8, 8, 8, 0.62); color: rgba(255, 255, 255, 0.88);
  font: 600 11px/1.2 var(--ff-head); letter-spacing: 0.14em; text-transform: uppercase;
}
[dir="rtl"] .nl-tag { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.nl .nl-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 5px 12px;
  border: 1px solid var(--novi-line-2); border-radius: 999px; font-size: 13px; line-height: 1.3; color: var(--novi-text);
}
.nl .nl-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--novi-gold); }

/* =====================================================================
   Hero
   ===================================================================== */
.nl-hero-wrap { position: relative; }
.nl-hero.novi-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: auto; min-height: clamp(560px, 92svh, 940px); max-height: none;
  background: #070707; color: #fff;
}
.nl-hero__media { position: absolute; inset: 0; z-index: 0; }
.nl-hero__media picture, .nl-hero__media img { width: 100%; height: 100%; }
.nl-hero__media img { object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .nl-hero__media img { animation: nl-kenburns 16s var(--novi-ease) both; }
}
@keyframes nl-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.nl-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 6, 6, 0.94) 0%, rgba(6, 6, 6, 0.62) 34%, rgba(6, 6, 6, 0.12) 68%, rgba(6, 6, 6, 0.5) 100%),
    linear-gradient(90deg, rgba(6, 6, 6, 0.6) 0%, rgba(6, 6, 6, 0) 64%);
}
[dir="rtl"] .nl-hero__scrim {
  background:
    linear-gradient(to top, rgba(6, 6, 6, 0.94) 0%, rgba(6, 6, 6, 0.62) 34%, rgba(6, 6, 6, 0.12) 68%, rgba(6, 6, 6, 0.5) 100%),
    linear-gradient(270deg, rgba(6, 6, 6, 0.6) 0%, rgba(6, 6, 6, 0) 64%);
}
.nl-hero--plain { background: radial-gradient(80% 70% at 20% 0%, rgba(190, 149, 101, 0.16), transparent 60%), #070707; }
.nl-hero__inner { position: relative; z-index: 2; padding-top: calc(var(--novi-header-h, 76px) + clamp(48px, 8vh, 96px)); padding-bottom: clamp(30px, 5vh, 56px); }

.nl-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 clamp(22px, 4vh, 40px); padding: 0; list-style: none; font: 400 var(--fs-small)/1.4 var(--ff-body); color: rgba(255, 255, 255, 0.72); }
.nl-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.nl-crumbs li + li::before { content: "/"; color: var(--novi-gold); }
.nl-crumbs a { color: #fff; text-decoration: none; transition: color 0.3s; }
.nl-crumbs a:hover { color: var(--novi-gold-hi); }
.nl-crumbs [aria-current] { color: rgba(255, 255, 255, 0.72); }

.nl-hero .nl-eyebrow { color: var(--novi-gold-hi); }
.nl-hero .nl-hero__title {
  margin: 18px 0 0; max-width: 21ch; color: #fff; text-wrap: balance;
  font: 400 var(--fs-display)/1.06 var(--ff-head); letter-spacing: -0.022em;
}
[dir="rtl"] .nl-hero .nl-hero__title { max-width: 24ch; font-weight: 700; line-height: 1.32; letter-spacing: 0; }
.nl-hero .nl-hero__lead { margin: 22px 0 0; max-width: 58ch; font-size: var(--fs-lead); line-height: 1.7; color: rgba(255, 255, 255, 0.84); }
.nl-hero .nl-hero__lead strong { color: #fff; }
.nl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.nl-hero .nl-btn.is-ghost { color: #fff !important; border-color: rgba(255, 255, 255, 0.34); }
.nl-hero .nl-btn.is-ghost:hover { color: var(--novi-gold-hi) !important; border-color: var(--novi-gold-hi); }

.nl-hero__bar {
  position: relative; z-index: 2; border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(6, 6, 6, 0.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nl-hero__bar > .container { display: flex; align-items: center; gap: 24px; }
.nl-hero__facts { flex: 1; display: grid; column-gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nl-hero__facts li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; min-width: 0; }
.nl-hero__facts b {
  font: 400 clamp(20px, 0.9vw + 14px, 28px)/1.1 var(--ff-head); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  background: var(--novi-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nl-hero__facts b .mb-count { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.nl-hero__facts li > span { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
[dir="rtl"] .nl-hero__facts b { font-weight: 700; letter-spacing: 0; }
.nl-hero__tag { position: static; flex: none; }
@media (min-width: 768px) {
  .nl-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nl-hero__facts li { padding: 20px 24px 22px 0; }
  [dir="rtl"] .nl-hero__facts li { padding: 20px 0 22px 24px; }
  .nl-hero__facts li + li { padding-inline-start: 24px; border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
}
@media (max-width: 767px) {
  .nl-hero.novi-hero { min-height: clamp(560px, 100svh, 760px); }
  .nl-hero__tag { display: none; }
  .nl-hero__actions .nl-btn { flex: 1 1 auto; }
}

/* =====================================================================
   Intro: overview + on-this-page jump links
   ===================================================================== */
.nl-intro { padding-bottom: clamp(48px, 5vw, 88px); }
/* minmax(0,1fr): below 992px the nowrap jump-link scroller must not size the single column (it pushed the
   intro copy ~2,500px wide and clipped it on phones/tablets — visual QA 2026-09-18) */
.nl-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.nl .nl-intro__first {
  margin: 0 0 1em; max-width: 38em; color: var(--novi-strong);
  font: 400 var(--fs-h3)/1.55 var(--ff-head); letter-spacing: -0.005em;
}
[dir="rtl"] .nl .nl-intro__first { font-weight: 500; line-height: 1.85; letter-spacing: 0; }
.nl-toc { margin-top: 26px; }
.nl-toc__label { margin: 0 0 10px; font-size: var(--fs-small); color: var(--novi-muted); }
.nl-toc ol { border-top: 1px solid var(--novi-line); }
.nl-toc li { border-bottom: 1px solid var(--novi-line); }
.nl-toc a {
  display: flex; gap: 14px; align-items: baseline; padding: 11px 0;
  font-size: 14.5px; line-height: 1.45; color: var(--novi-text); text-decoration: none; transition: color 0.3s, padding 0.4s var(--novi-ease);
}
.nl-toc a span { flex: none; font: 600 11px/1.4 var(--ff-head); letter-spacing: 0.12em; color: var(--novi-gold); font-variant-numeric: tabular-nums; }
.nl-toc a:hover { color: var(--novi-gold-hi); padding-inline-start: 6px; }
@media (max-width: 991px) {
  .nl-toc ol { display: flex; gap: 8px; overflow-x: auto; border: 0; scrollbar-width: none; padding-bottom: 4px; }
  .nl-toc ol::-webkit-scrollbar { display: none; }
  .nl-toc li { flex: none; border: 0; }
  .nl-toc a { padding: 6px 14px; border: 1px solid var(--novi-line-2); border-radius: 999px; font-size: 13px; white-space: nowrap; }
  .nl-toc a:hover { padding-inline-start: 14px; }
}
@media (min-width: 992px) {
  .nl-intro__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
  .nl-intro__aside { position: sticky; top: var(--nl-sticky); }
}

/* =====================================================================
   Named-project proof
   ===================================================================== */
.nl-proof { background: radial-gradient(70% 60% at 85% 0%, rgba(var(--novi-gold-rgb), 0.08), transparent 62%), var(--novi-bg); }
[dir="rtl"] .nl-proof { background: radial-gradient(70% 60% at 15% 0%, rgba(var(--novi-gold-rgb), 0.08), transparent 62%), var(--novi-bg); }
.nl .nl-proof__note { margin: 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.6; color: var(--novi-muted); }
.nl-proof__grid {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5) 6px;
}
.nl-proof__grid::-webkit-scrollbar { display: none; }
.nl-proof__item { flex: 0 0 min(84%, 400px); scroll-snap-align: start; }
.nl-proj { height: 100%; display: flex; flex-direction: column; background: var(--nl-card); border: 1px solid var(--novi-line); }
.nl-proj__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #151412; }
.nl-proj__media picture, .nl-proj__media img { width: 100%; height: 100%; }
.nl-proj__media img { object-fit: cover; transition: transform 1.4s var(--novi-ease); }
.nl-proj:hover .nl-proj__media img { transform: scale(1.05); }
.nl-proj__status {
  position: absolute; z-index: 3; bottom: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px; background: rgba(8, 8, 8, 0.62); color: #fff; font-size: 12px; line-height: 1.2;
}
.nl-proj__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #be9565; box-shadow: 0 0 0 0 rgba(190, 149, 101, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .nl-proj__status::before { animation: nl-pulse 2.4s var(--novi-ease) infinite; }
}
@keyframes nl-pulse { 0% { box-shadow: 0 0 0 0 rgba(190, 149, 101, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(190, 149, 101, 0); } }
.nl-proj__body { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 2.2vw, 30px); }
.nl .nl-proj__metric {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.1em; margin: 0 0 6px;
  font: 400 var(--fs-stat)/1 var(--ff-head); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.nl-proj__metric .mb-count, .nl-proj__unit {
  background: var(--novi-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nl-proj__unit { font-size: 0.42em; letter-spacing: 0; }
[dir="rtl"] .nl .nl-proj__metric { font-weight: 700; letter-spacing: 0; }
.nl .nl-proj__name { margin: 0; color: var(--novi-strong); font: 400 var(--fs-h3)/1.25 var(--ff-head); letter-spacing: -0.01em; }
[dir="rtl"] .nl .nl-proj__name { font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.nl .nl-proj__place { margin: 2px 0 0; font: 600 var(--fs-eyebrow)/1.5 var(--ff-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--novi-gold-hi); }
[dir="rtl"] .nl .nl-proj__place { font-size: 14px; letter-spacing: 0; }
.nl .nl-proj__role { margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--novi-muted); max-width: 52ch; }
@media (min-width: 768px) {
  .nl-proof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; overflow: visible; margin-inline: 0; padding: 0; }
}
@media (min-width: 992px) {
  .nl-proof__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
  .nl-proof__item[data-span="7"] { grid-column: span 7; }
  .nl-proof__item[data-span="6"] { grid-column: span 6; }
  .nl-proof__item[data-span="5"] { grid-column: span 5; }
  .nl-proof__item[data-span="4"] { grid-column: span 4; }
  .nl-proof__item[data-span="7"] .nl-proj__media { aspect-ratio: 16 / 9; }
  .nl-proof__item[data-span="5"] .nl-proj__media { aspect-ratio: 5 / 4; }
  .nl-proof__item[data-span="5"] { margin-top: clamp(24px, 3vw, 48px); }
}

/* =====================================================================
   Editorial split: framed visual beside the copy
   ===================================================================== */
.nl-split { display: grid; gap: 32px; }
.nl-pic { position: relative; overflow: hidden; background: var(--novi-surface); aspect-ratio: 4 / 3; }
.nl-pic picture, .nl-pic img { width: 100%; height: 100%; }
.nl-pic img { object-fit: cover; transition: transform 1.4s var(--novi-ease); }
.nl-pic:hover img { transform: scale(1.04); }
.nl-pic::before {
  content: ""; position: absolute; z-index: 3; top: 12px; inset-inline-start: 12px; width: 22px; height: 22px; pointer-events: none;
  border-top: 1px solid #be9565; border-inline-start: 1px solid #be9565;
}
@media (min-width: 992px) {
  .nl-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 110px); align-items: start; }
  .nl-split--flip .nl-split__media { order: 2; }
  .nl-split__media { position: sticky; top: var(--nl-sticky); }
  .nl-split__pic { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--nl-sticky) - 28px); }
  .nl-split__pic[data-ratio="1:1"] { aspect-ratio: 1 / 1; }
  .nl-split__body .nl-head { margin-bottom: clamp(28px, 3vw, 44px); }
}

/* =====================================================================
   Capability grid (grid block)
   ===================================================================== */
.nl-caps { display: grid; gap: 14px; }
.nl-cap {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 32px);
  background: var(--nl-card); border: 1px solid var(--novi-line);
}
.nl-cap__n { font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); color: var(--novi-gold-hi); }
.nl .nl-cap__title { margin: 10px 0 0; color: var(--novi-strong); font: 500 var(--fs-h4)/1.35 var(--ff-head); letter-spacing: -0.005em; }
[dir="rtl"] .nl .nl-cap__title { font-weight: 700; line-height: 1.55; letter-spacing: 0; }
.nl .nl-cap__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--novi-muted); }
@media (min-width: 768px) {
  .nl-caps--2, .nl-caps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1200px) {
  .nl-caps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.nl-caps + *, * + .nl-caps { margin-top: 26px; }

/* =====================================================================
   Process timeline (steps block): the rail draws as it scrolls through
   ===================================================================== */
.nl-tl { position: relative; margin-top: 8px; }
.nl-tl__rail { position: absolute; top: 24px; bottom: 24px; inset-inline-start: 23px; width: 1px; background: var(--novi-line); }
.nl-tl__rail i { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--novi-gold-hi), var(--novi-gold)); transform-origin: center top; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nl-tl__rail i { animation: nl-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
  }
}
@keyframes nl-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.nl-tl__step { position: relative; padding-inline-start: 76px; padding-bottom: clamp(32px, 4.5vw, 52px); }
.nl-tl__step:last-child { padding-bottom: 0; }
.nl-tl__node {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 1; display: grid; place-items: center;
  width: 47px; height: 47px; border-radius: 50%; border: 1px solid var(--novi-gold);
  background: var(--novi-gold); color: var(--novi-on-gold); font: 600 13px/1 var(--ff-head); letter-spacing: 0.04em;
}
.nl-tl__step.bm-wait .nl-tl__node { background: var(--novi-bg); color: var(--novi-muted); border-color: var(--novi-line-2); }
.nl-tl__step.bm-in .nl-tl__node { animation: nl-node 0.9s var(--novi-ease) both 0.25s; }
@keyframes nl-node {
  from { background: var(--novi-bg); color: var(--novi-muted); border-color: var(--novi-line-2); transform: scale(0.86); }
  to { background: var(--novi-gold); color: var(--novi-on-gold); border-color: var(--novi-gold); transform: scale(1); }
}
.nl-tl__node .mb-count { color: inherit; }
.nl-tl__card { padding-top: 6px; }
.nl-tl__stage { display: block; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); color: var(--novi-muted); }
.nl .nl-tl__title { margin: 8px 0 0; color: var(--novi-strong); font: 400 var(--fs-h3)/1.25 var(--ff-head); letter-spacing: -0.01em; }
[dir="rtl"] .nl .nl-tl__title { font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.nl .nl-tl__text { margin: 12px 0 0; max-width: 52ch; font-size: var(--fs-body); line-height: 1.7; color: var(--novi-muted); }
@media (min-width: 992px) {
  .nl-sec:not(.nl-sec--split) .nl-tl__rail { inset-inline-start: 50%; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step { width: 50%; padding: 0 76px 0 0; text-align: end; }
  [dir="rtl"] .nl-sec:not(.nl-sec--split) .nl-tl__step { padding: 0 0 0 76px; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step + .nl-tl__step { margin-top: -36px; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step .nl-tl__node { inset-inline-start: auto; inset-inline-end: -24px; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step .nl-tl__text { margin-inline-start: auto; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step:nth-child(even) { margin-inline-start: 50%; padding: 0 0 0 76px; text-align: start; }
  [dir="rtl"] .nl-sec:not(.nl-sec--split) .nl-tl__step:nth-child(even) { padding: 0 76px 0 0; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step:nth-child(even) .nl-tl__node { inset-inline-start: -24px; inset-inline-end: auto; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step:nth-child(even) .nl-tl__text { margin-inline-start: 0; }
  .nl-sec:not(.nl-sec--split) .nl-tl__step:last-child { padding-bottom: 0; }
}
.nl-tl + *, * + .nl-tl { margin-top: 30px; }

/* =====================================================================
   Lists, table, callout
   ===================================================================== */
.nl-list { display: grid; gap: 0; max-width: 72ch; border-top: 1px solid var(--novi-line); }
.nl-list li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--novi-line); font-size: var(--fs-body); line-height: 1.7; color: var(--novi-text-2); }
[dir="rtl"] .nl-list li { padding: 14px 26px 14px 0; }
.nl-list li::before { content: ""; position: absolute; top: calc(14px + 0.7em); inset-inline-start: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--novi-gold); }
.nl-list--check li { padding-inline-start: 36px; }
[dir="rtl"] .nl-list--check li { padding-inline-start: 0; padding-inline-end: 36px; }
.nl-list--check li::before {
  top: calc(14px + 0.2em); width: 20px; height: 20px; border: 1px solid rgba(var(--novi-gold-rgb), 0.55);
  background: rgba(var(--novi-gold-rgb), 0.12) center / 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3L11 1.5' fill='none' stroke='%23be9565' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.nl-list + *, * + .nl-list { margin-top: 26px; }

.nl-table { margin: 0; }
.nl-table + *, * + .nl-table { margin-top: 30px; }
.nl .nl-table__caption { margin: 0 0 12px; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.nl-table__scroll { overflow-x: auto; border-top: 1px solid var(--novi-gold); border-bottom: 1px solid var(--novi-line); }
.nl-table__scroll:focus-visible { outline: 2px solid var(--novi-gold-hi); outline-offset: 3px; }
.nl-table table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; }
.nl-table th, .nl-table td { padding: 16px 18px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--novi-line); color: var(--novi-text-2); line-height: 1.6; }
.nl-table thead th { padding-block: 14px; color: var(--novi-strong); font: 600 13px/1.4 var(--ff-head); letter-spacing: 0.04em; background: rgba(var(--novi-gold-rgb), 0.07); }
.nl-table tbody th { color: var(--novi-strong); font-weight: 600; }
.nl-table tbody tr { transition: background-color 0.3s; }
.nl-table tbody tr:hover { background: rgba(var(--novi-fg-rgb), 0.03); }
.nl-table tr:last-child th, .nl-table tr:last-child td { border-bottom: 0; }
.nl .nl-table__note { margin: 12px 0 0; max-width: 80ch; font-size: var(--fs-small); line-height: 1.7; color: var(--novi-muted); }

.nl-callout {
  position: relative; max-width: 900px; padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px);
  border-inline-start: 2px solid var(--novi-gold);
  background: linear-gradient(90deg, rgba(var(--novi-gold-rgb), 0.1), rgba(var(--novi-gold-rgb), 0.02));
}
[dir="rtl"] .nl-callout { background: linear-gradient(270deg, rgba(var(--novi-gold-rgb), 0.1), rgba(var(--novi-gold-rgb), 0.02)); }
.nl .nl-callout__title { margin: 0 0 10px; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.nl .nl-callout__text { margin: 0; font-size: var(--fs-body); line-height: 1.8; color: var(--novi-text-2); }
.nl-callout + *, * + .nl-callout { margin-top: 26px; }

/* =====================================================================
   Image link tiles (cards block)
   ===================================================================== */
.nl-tiles {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5) 6px;
}
.nl-tiles::-webkit-scrollbar { display: none; }
.nl-tiles__item { flex: 0 0 min(78%, 340px); scroll-snap-align: start; }
.nl-tiles + *, * + .nl-tiles { margin-top: 30px; }
.nl-tile {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: #151412;
  color: #fff !important; text-decoration: none !important;
}
.nl-tile__media { position: absolute; inset: 0; }
.nl-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--novi-ease); }
.nl-tile__media--plain { background: radial-gradient(90% 70% at 20% 10%, rgba(190, 149, 101, 0.28), transparent 60%), #151412; }
.nl-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6, 6, 6, 0.94), rgba(6, 6, 6, 0.25) 58%, rgba(6, 6, 6, 0.38)); transition: opacity 0.5s; }
.nl-tile__n { position: absolute; z-index: 2; top: 18px; inset-inline-start: 20px; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); color: #e2c192; }
.nl-tile__body { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 24px; transition: transform 0.6s var(--novi-ease); }
.nl-tile__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 var(--fs-h3)/1.2 var(--ff-head); letter-spacing: -0.01em; color: #fff; }
[dir="rtl"] .nl-tile__title { font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.nl-tile__title .nl-arrow { color: #e2c192; }
.nl-tile__summary { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.nl-tile__more { font: 600 11px/1.4 var(--ff-head); letter-spacing: 0.14em; text-transform: uppercase; color: #e2c192; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.5s var(--novi-ease); }
[dir="rtl"] .nl-tile__more { font-size: 13px; letter-spacing: 0; }
.nl-tile:hover .nl-tile__media img, .nl-tile:focus-visible .nl-tile__media img { transform: scale(1.07); }
.nl-tile:hover .nl-tile__body, .nl-tile:focus-visible .nl-tile__body { transform: translateY(-6px); }
.nl-tile:hover .nl-tile__more, .nl-tile:focus-visible .nl-tile__more { opacity: 1; transform: none; }
.nl-tile:hover .nl-arrow { transform: translateX(4px); }
[dir="rtl"] .nl-tile:hover .nl-arrow { transform: scaleX(-1) translateX(4px); }
.nl-tile:focus-visible { outline: 2px solid #e2c192; outline-offset: 3px; }
@media (hover: none) { .nl-tile__more { opacity: 1; transform: none; } }
@media (min-width: 768px) {
  .nl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; overflow: visible; margin-inline: 0; padding: 0; }
  .nl-tile { aspect-ratio: 5 / 4; }
}
@media (min-width: 1200px) {
  .nl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nl-tiles[data-n="4"], .nl-tiles[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nl-tiles[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-tile { aspect-ratio: 4 / 5; }
  .nl-tiles[data-n="2"] .nl-tile { aspect-ratio: 16 / 10; }
}

/* =====================================================================
   Real portfolio photography rail
   ===================================================================== */
.nl-gallery .nl-head { margin-bottom: clamp(26px, 3vw, 44px); }
.nl .nl-gallery__note { margin: 12px 0 0; font-size: var(--fs-small); color: var(--novi-muted); }
.nl-sec .nl-gallery { margin-top: 10px; }
.nl-sec--split .nl-gallery, .nl-split__body .nl-gallery { margin-top: 36px; }
.nl-gallery__rail {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5) 6px;
}
.nl-gallery__rail::-webkit-scrollbar { display: none; }
.nl-gallery__rail > li { flex: 0 0 min(72%, 300px); scroll-snap-align: start; }
.nl-shot { display: flex; flex-direction: column; gap: 10px; height: 100%; color: inherit; text-decoration: none !important; }
.nl-shot__media { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--novi-surface); }
.nl-shot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--novi-ease); }
.nl-shot:hover .nl-shot__media img { transform: scale(1.06); }
.nl-shot__title { color: var(--novi-strong); font: 500 var(--fs-h5)/1.35 var(--ff-head); }
[dir="rtl"] .nl-shot__title { font-weight: 700; line-height: 1.5; }
.nl-shot__more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--novi-gold-hi); }
.nl-shot:hover .nl-arrow { transform: translateX(4px); }
[dir="rtl"] .nl-shot:hover .nl-arrow { transform: scaleX(-1) translateX(4px); }
@media (min-width: 992px) {
  .nl-gallery__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 18px; overflow: visible; margin-inline: 0; padding: 0; }
  .nl-split__body .nl-gallery__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   Offices
   ===================================================================== */
.nl-offices { display: grid; gap: 18px; }
.nl-offices--single { max-width: 720px; }
.nl-offices__grid { display: grid; gap: 16px; }
.nl-office {
  padding: clamp(24px, 3vw, 36px); background: var(--nl-card); border: 1px solid var(--novi-line); border-top: 1px solid var(--novi-gold);
}
.nl .nl-office__country { margin: 0; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.nl .nl-office__city { margin: 10px 0 0; color: var(--novi-strong); font: 400 var(--fs-h3)/1.25 var(--ff-head); }
[dir="rtl"] .nl .nl-office__city { font-weight: 700; line-height: 1.45; }
.nl .nl-office__addr { margin: 12px 0 0; max-width: 42ch; font-style: normal; font-size: 15px; line-height: 1.65; color: var(--novi-muted); }
.nl-office__lines { margin-top: 16px !important; display: grid; gap: 6px; }
.nl-office__lines a { color: var(--novi-text); text-decoration: none; font-size: 15px; transition: color 0.3s; }
.nl-office__lines a:hover { color: var(--novi-gold-hi); }
.nl-office__label { font-size: 13px; color: var(--novi-muted); }
.nl-office__actions { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 20px; }
@media (min-width: 768px) { .nl-offices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
* + .nl-offices { margin-top: 26px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.nl-faq__grid { display: grid; gap: 32px; }
.nl-faq__head .nl-link { margin-top: 26px; }
.nl-faq__list { border-top: 1px solid var(--novi-line); }
.nl-faq__item { border-bottom: 1px solid var(--novi-line); transition: border-color 0.4s; }
.nl-faq__item[open] { border-bottom-color: rgba(var(--novi-gold-rgb), 0.5); }
.nl-faq__q { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 2px; }
.nl-faq__q::-webkit-details-marker { display: none; }
.nl-faq__q:focus-visible { outline: 2px solid var(--novi-gold-hi); outline-offset: 2px; }
.nl-faq__n { font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: 0.1em; color: var(--novi-gold); font-variant-numeric: tabular-nums; }
/* light theme: the gold needs to darken for 4.5:1 on the cream FAQ card */
:root[data-theme="light"] .nl-faq__n { color: #6f5330; }
.nl .nl-faq__q h3 { margin: 0; color: var(--novi-strong); font: 500 var(--fs-h4)/1.45 var(--ff-head); transition: color 0.3s; }
[dir="rtl"] .nl .nl-faq__q h3 { font-weight: 700; line-height: 1.6; }
.nl-faq__q:hover h3 { color: var(--novi-gold-hi); }
.nl-faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--novi-gold-rgb), 0.5); transition: background-color 0.35s, transform 0.5s var(--novi-ease); }
.nl-faq__icon::before, .nl-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: var(--novi-gold-hi); transition: transform 0.35s var(--novi-ease); }
.nl-faq__icon::after { transform: rotate(90deg); }
.nl-faq__item[open] .nl-faq__icon { background: rgba(var(--novi-gold-rgb), 0.14); }
.nl-faq__item[open] .nl-faq__icon::after { transform: rotate(0deg); }
.nl-faq__a { padding: 0 2px 24px; padding-inline-start: 44px; }
.nl .nl-faq__a p { margin: 0; max-width: 70ch; color: var(--novi-text-2); font-size: var(--fs-body); line-height: 1.8; }
.nl-faq__item[open] .nl-faq__a { animation: nl-open 0.5s var(--novi-ease) both; }
@keyframes nl-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 992px) {
  .nl-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
  .nl-faq__head { position: sticky; top: var(--nl-sticky); margin-bottom: 0; }
}

/* =====================================================================
   Explore more (compact rows)
   ===================================================================== */
.nl-related__cols { display: grid; gap: 36px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.nl .nl-related__h { margin: 0 0 12px; font: 600 var(--fs-eyebrow)/1.4 var(--ff-head); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); color: var(--novi-gold-hi); }
.nl-rows { border-top: 1px solid var(--novi-line); }
.nl-rows > li { border-bottom: 1px solid var(--novi-line); }
.nl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; padding: 15px 0;
  color: inherit; text-decoration: none !important;
}
.nl-row__title { color: var(--novi-strong); font: 500 16px/1.4 var(--ff-head); transition: color 0.3s; }
[dir="rtl"] .nl-row__title { font-weight: 700; line-height: 1.55; }
.nl-row__summary { grid-column: 1; font-size: 13.5px; line-height: 1.55; color: var(--novi-muted); }
.nl-row .nl-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--novi-gold-hi); }
.nl-row:hover .nl-row__title { color: var(--novi-gold-hi); }
.nl-row:hover .nl-arrow { transform: translateX(4px); }
[dir="rtl"] .nl-row:hover .nl-arrow { transform: scaleX(-1) translateX(4px); }

/* =====================================================================
   Closing CTA
   ===================================================================== */
.nl-cta { background: var(--novi-bg); overflow: hidden; }
.nl-cta__glow {
  position: absolute; z-index: 0; left: 50%; top: 14%; width: min(1200px, 120vw); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--novi-gold-rgb), 0.16), rgba(var(--novi-gold-rgb), 0) 100%);
}
.nl .nl-mega {
  margin: 18px 0 clamp(32px, 4vw, 56px); max-width: 20ch; padding-bottom: 0.06em;
  font: 400 clamp(40px, 2.8vw + 26px, 68px)/1.02 var(--ff-head); letter-spacing: -0.025em;
  background: var(--novi-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[dir="rtl"] .nl .nl-mega { font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.nl-cta__row { display: grid; gap: 28px; align-items: end; }
.nl .nl-cta__lead { margin: 0; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.7; color: var(--novi-muted); }
.nl-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 992px) { .nl-cta__row { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
@media (max-width: 575px) { .nl-cta__actions .nl-btn { flex: 1 1 100%; } }

/* =====================================================================
   Light theme (tokens do most of the work; media keeps its dark scrims)
   ===================================================================== */
:root[data-theme="light"] .nl-cap, :root[data-theme="light"] .nl-proj, :root[data-theme="light"] .nl-office { background: var(--novi-surface); }
:root[data-theme="light"] .nl-proj__status::before { background: #be9565; }

/* =====================================================================
   Reduced motion: final states
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nl *, .nl *::before, .nl *::after, .nl-hero *, .nl-hero *::before, .nl-hero *::after {
    transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important;
  }
  .nl-tl__rail i { transform: none !important; }
}