/* =========================================================================
   SYSTEMIC — styles.css
   Single stylesheet. Organized by section.
   Tokens → Reset → Base → Utilities → Components → Sections → Reveal → Media
   ========================================================================= */


/* ===================== 01. TOKENS ===================== */
:root {
  /* Color */
  --bg:        #000000;
  --bg-elev:   #0A0A0B;
  --surface:   #0F0F11;
  --text:      #EDEDED;
  --text-muted:#8A8A8E;
  --hairline:  rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.14);
  --accent:    #E6007E;
  --accent-br: #FF1E92;
  --accent-dim:rgba(230,0,126,0.12);

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-tech:    "Chakra Petch", "Space Grotesk", ui-monospace, monospace;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  40px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8:  128px;
  --s-9:  200px;

  /* Layout */
  --container-max: 1440px;
  --gutter: clamp(20px, 5vw, 80px);

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);

  /* Motion tokens (canonical names from brief) */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   0.4s;
  --d-base:   0.8s;
  --d-slow:   1.2s;

  /* Layering (documented) */
  --z-grain:    1;
  --z-content:  2;
  --z-nav-mob:  70;
  --z-nav:      80;
  --z-prog:     90;
  --z-float:    95;
  --z-ai:       100;
  --z-wipe:     8000;
  --z-cursor:   9000;
  --z-preload:  9500;

  /* Safe area insets */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left,   0px);
  --safe-r: env(safe-area-inset-right,  0px);
}


/* ===================== 02. RESET / BASE ===================== */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; background: var(--bg); }
body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: #fff; }

/* Slim, branded scrollbar */
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
::-webkit-scrollbar { width: 8px; background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border: 2px solid #000;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-track { background: transparent; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }


/* ===================== 03. TYPOGRAPHY ===================== */
.label, .eyebrow {
  font-family: var(--font-tech);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
}
h1,h2,h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; color: var(--text); }
p { color: var(--text-muted); }
em { font-style: normal; color: var(--accent); }


/* ===================== 04. UTILITIES ===================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: 12px 16px;
  font-family: var(--font-tech); letter-spacing: .1em; z-index: 9999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Buttons */
.btn {
  --pad-y: 14px;
  --pad-x: 22px;
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-tech);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8125rem;
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  background: transparent;
  transition: color .35s var(--ease-out),
              background-color .35s var(--ease-out),
              border-color .35s var(--ease-out);
  will-change: transform;
}
.btn .slashes i { background: currentColor; transition: background .35s var(--ease-out); }
.btn:hover { color: #fff; border-color: var(--accent-br); background: var(--accent); }
.btn:hover .slashes i { background: #fff; }
.btn:focus-visible { outline: 2px solid var(--accent-br); outline-offset: 4px; }

.btn--accent { color: var(--accent); border-color: var(--accent); }
.btn--accent .slashes i { background: var(--accent); }
.btn--accent:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn--lg { --pad-y: 22px; --pad-x: 36px; font-size: .9rem; }


/* ===================== 05. SLASHES — brand device ===================== */
.slashes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.slashes i {
  display: block;
  width: 2px;
  height: 12px;
  background: var(--accent);
  transform: skewX(-20deg);
  transform-origin: 50% 50%;
}
.slashes--sm    { gap: 2px; }
.slashes--sm  i { width: 1px; height: 8px; }
.slashes--lg    { gap: 8px; }
.slashes--lg  i { width: 4px; height: 28px; }
.slashes--xl    { gap: 12px; }
.slashes--xl  i { width: 6px; height: 56px; }
.slashes--xxl   { gap: 28px; }
.slashes--xxl i { width: 14px; height: 220px; }


/* ===================== 06. CUSTOM CURSOR ===================== */
.cursor {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.cursor.is-on { opacity: 1; }
.cursor__dot, .cursor__ring {
  position: fixed; top: 0; left: 0;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  will-change: transform, width, height, background-color;
}
.cursor__dot {
  width: 6px; height: 6px;
  background: var(--text);
  mix-blend-mode: difference;
}
.cursor__ring {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,.5);
  transition: width .3s var(--ease-out),
              height .3s var(--ease-out),
              border-color .3s var(--ease-out),
              background-color .3s var(--ease-out);
}
.cursor.is-hover .cursor__ring {
  width: 64px; height: 64px;
  border-color: var(--accent-br);
  background: var(--accent-dim);
}
.cursor.is-hover .cursor__dot { background: var(--accent-br); }
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}


/* ===================== 07. SCROLL PROGRESS ///  ===================== */
.scroll-progress {
  position: fixed;
  top: 12px; left: 0; right: 0;
  z-index: 90;
  display: flex; align-items: center;
  gap: 12px;
  padding: 0 var(--gutter);
  pointer-events: none;
  mix-blend-mode: difference;
}
.scroll-progress .slashes i { height: 10px; width: 1.5px; }
.scroll-progress__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--hairline);
  overflow: hidden;
}
.scroll-progress__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transform-origin: 0 50%;
}


/* ===================== 08. WIPE OVERLAY ===================== */
.wipe {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-100%);
  pointer-events: none;
}
.wipe .slashes { opacity: 0; }
.wipe.is-active { pointer-events: all; }


/* ===================== 09. PRELOADER ===================== */
.preloader {
  position: fixed; inset: 0; z-index: var(--z-preload);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Explicit initial state so the JS clip-path exit transition has a from-value */
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  will-change: clip-path;
}
/* Once the overlay starts clipping out, stop it from intercepting clicks
   (the exit transition runs for 950ms before the node is removed). */
.preloader[style*="100%"] { pointer-events: none; }
body.is-preloading { overflow: hidden; }
.preloader__inner {
  position: relative;
  width: min(560px, 80vw);
  display: flex; flex-direction: column;
  gap: var(--s-5);
}
.preloader__mark {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-4);
  height: 80px;
}
.preloader__logo {
  height: 60px; width: auto;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.preloader__slashes { opacity: 0; }
.preloader__meta {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-3);
}
.preloader__count {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--text);
}
.preloader__line {
  position: relative;
  height: 1px;
  background: var(--hairline);
  overflow: hidden;
}
.preloader__line span {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}


/* ===================== 10. NAV ===================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: var(--s-4) 0;
  transition: padding .3s var(--ease-out),
              background-color .3s var(--ease-out),
              border-color .3s var(--ease-out),
              backdrop-filter .3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-condensed {
  padding: var(--s-3) 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hairline);
}
.nav.is-hidden { transform: translateY(-110%); }

.nav__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
}
.nav__logo {
  display: inline-flex; align-items: center;
  /* Bumped from 28px (~+43%) for more brand presence — width:auto keeps
     aspect ratio. Mobile is sized via the responsive override below. */
  height: 40px;
}
.nav__logo img {
  height: 100%;
  width: auto;
  display: block;            /* drop the inline-baseline gap */
  max-width: none;
}
@media (max-width: 639.98px) {
  .nav__logo { height: 34px; }    /* proportional bump on mobile */
}

.nav__links {
  display: none;
  gap: clamp(20px, 3vw, 44px);
}
.nav__links a {
  position: relative;
  font-family: var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8125rem;
  color: var(--text);
  padding: 8px 0;
  transition: color .25s var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover { color: var(--accent-br); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { display: none; }

.nav__toggle {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong);
  margin-left: auto;
}
.nav__toggle::before { content: ""; position: absolute; inset: 0; }
.nav__toggle span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--text);
  transition: transform .35s var(--ease-out), top .35s var(--ease-out), opacity .25s var(--ease-out);
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg); }


/* ===================== 11. MOBILE NAV ===================== */
.nav-mobile {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg);
  padding: 110px var(--gutter) var(--s-5);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-out);
  pointer-events: none;
}
.nav-mobile.is-open { clip-path: inset(0 0 0 0); pointer-events: all; }
.nav-mobile__inner {
  display: flex; flex-direction: column;
  height: 100%; gap: var(--s-5);
}
.nav-mobile__inner > .label { color: var(--text-muted); }
.nav-mobile ul { display: flex; flex-direction: column; gap: 8px; }
.nav-mobile li {
  border-top: 1px solid var(--hairline);
}
.nav-mobile li:last-child { border-bottom: 1px solid var(--hairline); }
.nav-mobile li a {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.nav-mobile li a .num {
  font-family: var(--font-tech);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  min-width: 40px;
}
.nav-mobile li a .slashes { margin-left: auto; opacity: 0; transition: opacity .3s var(--ease-out); }
.nav-mobile li a:hover { color: var(--accent-br); }
.nav-mobile li a:hover .slashes { opacity: 1; }
.nav-mobile__email {
  margin-top: auto;
  font-family: var(--font-tech);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}


/* ===================== 12. HERO (image-rich, full-bleed slider) ===================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--s-7) + 40px) 0 var(--s-5);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
}

/* --- Full-bleed slider behind everything --- */
.hero__slider {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--e-inout);
  pointer-events: none;
  will-change: opacity;
}
.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bright enough that Belgrade reads clearly; the text-guard + text shadow
     handles the legibility behind the centered text column. */
  filter: brightness(0.80) contrast(1.04) saturate(0.85);
  transform: scale(1.04);
  will-change: transform;
}
/* Each active slide runs its own Ken Burns. Restart by re-adding the class. */
.hero__slide.is-active img {
  animation: heroKenBurns 9s var(--e-inout) forwards;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.04) translate(0%, 0%); }
  100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

/* Pause Ken Burns on hover so the photo is fully readable while user looks at it */
.hero__slider:hover .hero__slide.is-active img { animation-play-state: paused; }

/* --- Directional scrim: bright over the image, deeper behind the text column ---
   Two layered scrims:
   1. .hero__scrim — global vertical/horizontal scrim with magenta lift
   2. .hero__textguard — strong center-focused ellipse darken ONLY behind the
      vertical text column, so the white logo + headline stay AA-legible on
      any slide while the photo on the edges still reads clearly.            */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Vertical anchor — type lives in the middle/bottom so darken there */
    linear-gradient(180deg,
      rgba(0,0,0,0.20) 0%,
      rgba(0,0,0,0.00) 25%,
      rgba(0,0,0,0.32) 70%,
      rgba(0,0,0,0.75) 100%),
    /* Slight overall horizontal grading */
    linear-gradient(90deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.10) 60%,
      rgba(0,0,0,0.40) 100%),
    /* Magenta lift on the right where the text column sits */
    radial-gradient(60% 70% at 82% 50%, var(--accent-dim) 0%, transparent 70%);
}
.hero__textguard {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Strong ellipse darken centered behind the vertical text column */
    radial-gradient(ellipse 55% 55% at 50% 50%,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.15) 65%,
      rgba(0,0,0,0)    85%);
  mix-blend-mode: normal;
}

/* Text-shadow + drop-shadow on hero copy — survives any slide */
.hero__container .eyebrow { text-shadow: 0 1px 6px rgba(0,0,0,0.75); }
.hero__title  { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.7); }
.hero__sub    { text-shadow: 0 1px 8px rgba(0,0,0,0.8); }
.hero__logo   { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.hero__meta   .label { text-shadow: 0 1px 4px rgba(0,0,0,0.7); }

/* --- Slide indicators (bottom-left hairline dashes, safely above the AI float button) --- */
.hero__indicators {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--s-5) + 110px);   /* well above the bottom-left AI button */
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 640px) {
  .hero__indicators { bottom: calc(var(--s-5) + 90px); }
}
.hero__indicator {
  width: 28px; height: 2px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background-color .35s var(--e-out), width .35s var(--e-out);
}
.hero__indicator:hover { background: rgba(255,255,255,0.6); }
.hero__indicator.is-active { background: var(--accent); width: 48px; }
.hero__indicator:focus-visible { outline: 2px solid var(--accent-br); outline-offset: 4px; }
.hero__container {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  gap: var(--s-5);
}
.hero__grid {
  position: absolute; inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
  will-change: transform;
}
.hero__glow {
  position: absolute;
  z-index: 2;
  width: 1200px; height: 1200px;
  top: -200px; right: -300px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 60%);
  filter: blur(40px);
  opacity: .65;
  pointer-events: none;
  will-change: transform;
}

.hero__eyebrow { gap: var(--s-3); }

.hero__lockup {
  margin: 0;
  position: relative;
}
.hero__logo {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 26ch;
  text-wrap: balance;
  color: var(--text);
}

.hero__sub {
  max-width: 52ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--text-muted);
}

.hero__meta {
  margin-top: auto;
  padding-top: var(--s-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--s-4);
}
@media (max-width: 640px) {
  .hero__logo { max-width: 320px; }
}
.hero__cue { display: flex; align-items: center; gap: 12px; }
.hero__cue-line {
  display: block;
  width: 60px; height: 1px;
  background: var(--text);
  transform-origin: 0 50%;
  animation: cue 2.2s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { transform: scaleX(0); }
  50%  { transform: scaleX(1); }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}
.hero__mark { justify-self: center; }
.hero__location { justify-self: end; }


/* ===================== 13. MANIFESTO ===================== */
.manifesto {
  padding: clamp(var(--s-7), 14vw, var(--s-9)) 0;
  border-bottom: 1px solid var(--hairline);
}
.manifesto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5) var(--s-6);
  align-items: center;
}
.manifesto__body { max-width: 100%; }
.manifesto__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.8vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 22ch;
  margin-top: var(--s-5);
  transform-origin: 0 50%;
  will-change: transform;
}
.manifesto__text em { color: var(--accent); font-style: normal; }

.manifesto__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elev);
}
.manifesto__visual::before,
.manifesto__visual::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--accent);
  pointer-events: none;
  z-index: 3;
}
.manifesto__visual::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.manifesto__visual::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.manifesto__visual img {
  filter: brightness(0.6) contrast(1.05) saturate(0.55);
  transform: scale(1.04);
  transition: transform 1.4s var(--e-out);
}
.manifesto__visual:hover img { transform: scale(1.08); }
.manifesto__tick {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 4;
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-br);
  background: rgba(0,0,0,.6);
  padding: 5px 9px;
  border: 1px solid var(--hairline-strong);
}

@media (min-width: 900px) {
  .manifesto__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-6);
  }
  .manifesto__visual { max-width: 520px; margin: 0 0 0 auto; }
}


/* ===================== 14. SECTION HEAD (shared) ===================== */
.section-head {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  max-width: 60ch;
}
.section-head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}
.section-head__title {
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
}
.section-head__sub {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  color: var(--text-muted);
  max-width: 50ch;
}


/* ===================== 15. SERVICES ===================== */
.services { padding: var(--s-7) 0; border-bottom: 1px solid var(--hairline); }

.services__list {
  border-top: 1px solid var(--hairline);
}
.service {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: padding .5s var(--ease-out);
}
.service::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .5s var(--ease-out);
}
.service:hover { padding-left: var(--s-4); }
.service:hover::before { transform: scaleY(1); transform-origin: 50% 100%; }
.service:hover .service__title { color: var(--accent-br); }
.service:hover .service__arrow { transform: translateX(8px); color: var(--accent-br); }
.service:hover .service__num { color: var(--text); }

.service__num {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  transition: color .35s var(--ease-out);
}
.service__body { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; }
.service__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -.02em;
  line-height: 1;
  transition: color .35s var(--ease-out);
}
.service__desc { font-size: 1rem; line-height: 1.5; color: var(--text-muted); }
.service__arrow {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-muted);
  text-align: right;
  transition: transform .4s var(--ease-out), color .35s var(--ease-out);
}


/* ===================== 16. APPROACH ===================== */
.approach {
  position: relative;
  padding: var(--s-7) 0;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
  overflow: hidden;
}
.approach__bg {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: .14;
  filter: grayscale(1) contrast(1.2) brightness(0.55);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
}
.approach__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.approach > .container { position: relative; z-index: 1; }

.approach__wrap {
  position: relative;
}
.approach__list {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
}
.approach__line {
  position: absolute;
  top: 0; bottom: 0;
  left: 24px;
  width: 1px;
  background: var(--hairline);
  z-index: 1;
}
.approach__line span {
  display: block;
  width: 100%; height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 0 0;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}
.step:last-of-type { border-bottom: 0; }
.step__num {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 100%;
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .12em;
  color: var(--text);
  background: var(--bg-elev);
  padding: 8px 0;
}
.step__body { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; }
.step__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -.02em;
  line-height: 1;
}
.step__desc { font-size: 1rem; color: var(--text-muted); }
.step__slash { align-self: center; opacity: .8; }


/* ===================== 17. STATS ===================== */
.stats { padding: var(--s-7) 0; border-bottom: 1px solid var(--hairline); }
.stats__lede { max-width: 38ch; }

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--hairline);
}
.stat {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}
.stat__num {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: clamp(3.5rem, 8vw, 7rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
}
.stat__label {
  font-family: var(--font-tech);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ===================== 18. WHY / VALUES ===================== */
.why { padding: var(--s-7) 0; border-bottom: 1px solid var(--hairline); }
.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.card {
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  background: var(--surface);
  display: flex; flex-direction: column;
  gap: var(--s-3);
  min-height: 320px;
  transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(.99);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
}
.card:hover { border-color: transparent; background: var(--bg-elev); }
.card:hover::after { opacity: 1; transform: scale(1); }
.card:hover .card__index { color: var(--accent-br); }
.card__index {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .18em;
  color: var(--text-muted);
  transition: color .35s var(--ease-out);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: auto;
}
.card__desc { color: var(--text-muted); font-size: 1rem; line-height: 1.55; }


/* ===================== 19. CTA (image-rich) ===================== */
.cta {
  position: relative;
  padding: clamp(var(--s-7), 14vw, var(--s-9)) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
}
.cta__image {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cta__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5) contrast(1.1) saturate(0.6);
  transform: scale(1.02);
  will-change: transform;
}
.cta__image::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.45) 100%),
    radial-gradient(60% 60% at 90% 50%, var(--accent-dim) 0%, transparent 70%);
  pointer-events: none;
}
.cta__bg-slashes {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  opacity: .14;
  z-index: 1;
  pointer-events: none;
}
.cta__bg-slashes i { background: var(--accent); }
.cta__container {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: var(--s-5);
  max-width: 30ch;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 9vw, 8rem);
  line-height: .95;
  letter-spacing: -.035em;
}
.cta__sub { font-size: clamp(1rem, 1.2vw, 1.125rem); color: var(--text-muted); max-width: 40ch; }
.cta__actions {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-3);
}
.cta__email {
  font-family: var(--font-tech);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8125rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.cta__email:hover { color: var(--accent-br); border-bottom-color: var(--accent-br); }


/* ===================== 20. FOOTER ===================== */
.footer {
  padding: var(--s-6) 0 var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
}
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* don't stretch the img across the column */
  gap: var(--s-3);
}
.footer__logo {
  display: block;                    /* drop inline baseline gap */
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;               /* belt + suspenders against any forced ratio */
}
.footer__tagline { color: var(--text-muted); }
.footer__col {
  display: flex; flex-direction: column; gap: 10px;
}
.footer__col .label { margin-bottom: 4px; color: var(--text-muted); }
.footer__col a { color: var(--text); transition: color .25s var(--ease-out); }
.footer__col a:hover { color: var(--accent-br); }
.footer__col p { color: var(--text-muted); font-size: .9375rem; }

.footer__base {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.footer__base .label { color: var(--text-muted); }


/* ===================== 21. REVEAL — initial states (JS animates) =====================
   GLOBAL RULE: content is VISIBLE BY DEFAULT. Initial hidden states apply
   ONLY when <body> carries the `.js` class — which reveal.js adds itself
   *after* GSAP/ScrollTrigger are confirmed available. If any of that
   pipeline fails, `.no-js` stays, every reveal target renders normally,
   and no headline can ever go missing.
   ============================================================== */
.line-mask  { display: block; overflow: hidden; }
.line-inner { display: block; will-change: transform; }

.js [data-reveal="fade"]  { opacity: 0; transform: translateY(24px); will-change: transform, opacity; }
.js [data-reveal="lines"] { opacity: 0; }
.js [data-reveal="words"] { opacity: 0; }
.js .line-inner { transform: translateY(110%); }
.js [data-reveal="words"] .word { display: inline-block; opacity: 0; transform: translateY(40%); will-change: transform, opacity; }

/* Body scroll lock — used by mobile menu */
body.is-locked { overflow: hidden; }


/* ===================== 22. RESPONSIVE ===================== */
@media (max-width: 639.98px) {
  .hero__meta {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero__mark, .hero__location { justify-self: start; }
  .hero__location { order: 3; }

  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
  .stats__lede { max-width: none; }

  .service { grid-template-columns: 60px 1fr; }
  .service__arrow { display: none; }
  .service:hover { padding-left: 12px; }

  .footer__base { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 640px) {
  .why__grid { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .nav__links { display: inline-flex; }
  .nav__cta   { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav-mobile { display: none; }

  .service { grid-template-columns: 140px 1fr 60px; gap: var(--s-5); }
  .why__grid { grid-template-columns: 1fr 1fr 1fr; }
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: var(--s-5) var(--s-4); border-right: 1px solid var(--hairline); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; padding-right: 0; }

  .step { grid-template-columns: 80px 1fr auto; }
  .approach__line { left: 28px; }

  .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); }
}

@media (min-width: 1200px) {
  .hero__title { font-size: clamp(2.5rem, 3.6vw, 3.5rem); letter-spacing: -.025em; }
}


/* ===================== 24. IMAGE TREATMENT (.imagefx) =====================
   Reusable wrapper for any photo. Apply darken + duotone + subtle desat in
   a consistent, brand-cohesive way. Use as a wrapper around <img>.
   ========================================================================= */
.imagefx {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.imagefx img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7) contrast(1.05) saturate(0.65);
  will-change: transform;
}
.imagefx::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%),
    radial-gradient(80% 60% at 80% 50%, var(--accent-dim) 0%, transparent 65%);
  pointer-events: none;
  mix-blend-mode: normal;
}
.imagefx[data-reveal="image"] img { transform: scale(1.08); }


/* ===================== 25. SERVICES IMAGE PREVIEW =====================
   Each .service has a hidden image preview on the right that clip-reveals on
   hover. Sits inside a fixed-width column on desktop, hidden on mobile.
   ========================================================================= */
@media (min-width: 900px) {
  .services__list { /* keep */ }
  .service {
    grid-template-columns: 140px 1fr 220px 60px;
    align-items: center;
  }
  .service__preview {
    position: relative;
    width: 220px;
    height: 130px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--bg-elev);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s var(--e-out);
  }
  .service:hover .service__preview { clip-path: inset(0 0% 0 0); }
  .service__preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.65) contrast(1.05) saturate(0.6);
    transform: scale(1.06);
    transition: transform 1.2s var(--e-out);
  }
  .service:hover .service__preview img { transform: scale(1.0); }
  .service__preview::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  .service__preview::before {
    content: "";
    position: absolute; top: 8px; left: 8px;
    width: 14px; height: 14px;
    border-top: 1px solid var(--accent);
    border-left: 1px solid var(--accent);
    z-index: 2;
    opacity: 0;
    transition: opacity .35s var(--e-out) .15s;
  }
  .service:hover .service__preview::before { opacity: 1; }
}
@media (max-width: 899.98px) {
  .service__preview { display: none; }
}


/* ===================== 26. FOOTER WATERMARK =====================
   Huge white logo at very low opacity, decorative full-width.
   ========================================================================= */
.footer {
  position: relative;
  overflow: hidden;
}
.footer__watermark {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 130%;
  max-width: none;
  transform: translateX(-50%);
  opacity: .035;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.footer > .container { position: relative; z-index: 1; }


/* ===================== 27. GRAIN + VIGNETTE ===================== */
.grain {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .085;
  mix-blend-mode: overlay;
}
.grain svg { width: 100%; height: 100%; }

.vignette {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}


/* ===================== 28. CORNER TICKS (.has-corners) =====================
   Thin L-marks at each corner of a section — "precision instrument" feel.
   ========================================================================= */
.has-corners { position: relative; }
.has-corners > .container { position: relative; }
.has-corners > .container::before,
.has-corners > .container::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 0 solid var(--hairline-strong);
  pointer-events: none;
}
.has-corners > .container::before {
  top: var(--s-4); left: 0;
  border-top-width: 1px; border-left-width: 1px;
}
.has-corners > .container::after {
  bottom: var(--s-4); right: 0;
  border-bottom-width: 1px; border-right-width: 1px;
}


/* ===================== 29. FLOATING UI (AI assistant + back-to-top) =====================
   Same bottom line, magnetic, accessible. Stack sensibly on mobile.
   ========================================================================= */
.float {
  position: fixed;
  bottom: calc(var(--s-5) + var(--safe-b));
  z-index: var(--z-float);
  display: flex;
}
.float--left  { left:  calc(var(--s-5) + var(--safe-l)); }
.float--right { right: calc(var(--s-5) + var(--safe-r)); }

@media (max-width: 640px) {
  .float { bottom: calc(var(--s-4) + var(--safe-b)); }
  .float--left  { left:  calc(var(--s-3) + var(--safe-l)); }
  .float--right { right: calc(var(--s-3) + var(--safe-r)); }
}

.fbtn {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(10,10,11,0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .35s var(--e-out),
              color .35s var(--e-out),
              background-color .35s var(--e-out);
  cursor: pointer;
}
.fbtn:hover { border-color: var(--accent-br); color: var(--accent-br); }
.fbtn:focus-visible { outline: 2px solid var(--accent-br); outline-offset: 4px; }
.fbtn .fbtn__glyph {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.fbtn .fbtn__glyph .slashes i { background: currentColor; }
@media (max-width: 640px) {
  .fbtn { width: 52px; height: 52px; }
}

/* AI button — subtle idle pulse */
.fbtn--ai {
  overflow: visible;
}
.fbtn--ai::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: aiPulse 2.6s var(--e-inout) infinite;
  pointer-events: none;
}
@keyframes aiPulse {
  0%   { transform: scale(.92); opacity: 0; }
  35%  { opacity: .35; }
  100% { transform: scale(1.25); opacity: 0; }
}
.fbtn--ai .fbtn__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%; transform: translateY(-50%);
  font-family: var(--font-tech);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .35s var(--e-out);
  pointer-events: none;
}
.float--left .fbtn--ai .fbtn__label {
  right: auto; left: calc(100% + 12px);
}
.fbtn--ai:hover .fbtn__label { opacity: 1; }

/* Back-to-top — progress ring */
.fbtn--top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out), border-color .35s var(--e-out), color .35s var(--e-out);
}
.fbtn--top.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fbtn__ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  pointer-events: none;
}
.fbtn__ring circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: square;
}


/* ===================== 30. AI ASSISTANT PANEL ===================== */
.ai-panel {
  position: fixed;
  bottom: calc(var(--s-5) + 80px + var(--safe-b));
  left: calc(var(--s-5) + var(--safe-l));
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  height: min(560px, 70vh);
  z-index: var(--z-ai);
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hairline-strong);
  display: flex; flex-direction: column;
  transform-origin: bottom left;
  transform: scale(.92) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s var(--e-out), opacity .35s var(--e-out);
}
.ai-panel.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 640px) {
  .ai-panel {
    bottom: calc(var(--s-3) + 64px + var(--safe-b));
    left:  calc(var(--s-3) + var(--safe-l));
    right: calc(var(--s-3) + var(--safe-r));
    width: auto;
    height: min(72vh, 560px);
  }
  .fbtn--ai .fbtn__label { display: none; }
}
.ai-panel::before {
  /* hairline accent at top corner */
  content: "";
  position: absolute; top: 0; left: 0;
  width: 32px; height: 1px;
  background: var(--accent);
}
.ai-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.ai-panel__brand {
  display: flex; align-items: center; gap: 10px;
}
.ai-panel__brand img { height: 18px; width: auto; }
.ai-panel__title {
  font-family: var(--font-tech);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ai-panel__close {
  width: 32px; height: 32px;
  border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  font-family: var(--font-tech);
  font-size: 1rem;
  line-height: 1;
  transition: border-color .25s var(--e-out), color .25s var(--e-out);
}
.ai-panel__close:hover { border-color: var(--accent); color: var(--accent-br); }

.ai-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  scrollbar-width: thin;
}
.ai-msg {
  max-width: 86%;
  padding: 12px 14px;
  font-size: .9375rem;
  line-height: 1.5;
  border: 1px solid var(--hairline);
}
.ai-msg--user {
  align-self: flex-end;
  border-color: var(--hairline-strong);
  background: rgba(255,255,255,0.02);
  color: var(--text);
}
.ai-msg--bot {
  align-self: flex-start;
  border-left: 1px solid var(--accent);
  background: var(--surface);
  color: var(--text);
}
.ai-msg__meta {
  display: block;
  font-family: var(--font-tech);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ai-msg--bot .ai-msg__meta { color: var(--accent-br); }

.ai-typing {
  align-self: flex-start;
  display: inline-flex; gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-left-color: var(--accent);
}
.ai-typing i {
  width: 4px; height: 4px;
  background: var(--text-muted);
  display: block;
  animation: aiDot 1.2s var(--e-inout) infinite;
}
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

.ai-panel__foot {
  border-top: 1px solid var(--hairline);
  padding: var(--s-3);
  display: flex; gap: var(--s-3);
  align-items: stretch;
}
.ai-panel__input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: .9375rem;
  outline: none;
  transition: border-color .25s var(--e-out);
}
.ai-panel__input::placeholder { color: var(--text-muted); }
.ai-panel__input:focus { border-color: var(--accent); }
.ai-panel__send {
  padding: 0 var(--s-3);
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  font-family: var(--font-tech);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background-color .25s var(--e-out), color .25s var(--e-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.ai-panel__send:hover:not(:disabled) { background: var(--accent); color: #fff; }
.ai-panel__send:disabled { opacity: .4; cursor: not-allowed; }


/* ===================== 31. ANIMATED UNDERLINES (body links) ===================== */
.footer__col a,
.cta__email,
.nav-mobile__email {
  position: relative;
}
.footer__col a::after,
.cta__email::after {
  /* explicit underline draw handled inline by other rules where present */
}


/* ===================== 32. FOCUS RINGS ===================== */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-br);
  outline-offset: 3px;
}


/* ===================== 33. POLISH ===================== */
h1, h2, h3, .hero__title, .cta__title, .manifesto__text, .section-head__title {
  text-wrap: balance;
}
.stat__num, .preloader__count, .ticker__time {
  font-variant-numeric: tabular-nums;
}

/* ===================== 34. BUTTON OUTLINE → FILL SWEEP =====================
   Hover wipes a magenta panel across the button from left to right while the
   text + slashes turn white. Subtle, premium, and additive on top of existing
   .btn rules — doesn't conflict with .btn--accent. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .55s cubic-bezier(0.65,0,0.35,1);
  z-index: -1;
  pointer-events: none;
}
.btn:hover::before { transform: translateX(0); }
.btn:hover { background: transparent; }  /* prevent flat magenta double-up */

/* ===================== 35. SCRAMBLE (no layout shift) ===================== */
.eyebrow span:not(.slashes),
.label.hero__location,
.footer__tagline,
.stat__label {
  /* Reserve a stable inline box so JS scramble can't reflow the line */
  display: inline-block;
}

/* ===================== 36. HERO MESH CANVAS ===================== */
.hero__mesh {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: screen;
}
@media (hover: none), (pointer: coarse) {
  .hero__mesh { display: none; }
}

/* ===================== 37. SECTORS MARQUEE ===================== */
.marquee {
  position: relative;
  padding: var(--s-5) 0;
  border-top:    1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  overflow: hidden;
  user-select: none;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  /* Slow default — scroll velocity may bump us up to ~1.6× via marquee.js */
  animation: marqueeRoll 70s linear infinite;
  will-change: transform;
}
@keyframes marqueeRoll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: 0 var(--s-6);
  flex-shrink: 0;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.marquee__item .slashes i { background: var(--accent); }
.marquee__sep {
  font-family: var(--font-tech);
  font-size: .9rem;
  letter-spacing: .15em;
  color: var(--text-muted);
}

/* ===================== 38. PRECISION TICKER ===================== */
.ticker {
  position: fixed;
  bottom: calc(var(--s-5) + 20px + var(--safe-b));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 18px;
  border: 1px solid var(--hairline-strong);
  background: rgba(10,10,11,0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}
.ticker__dot {
  width: 6px; height: 6px;
  background: var(--accent);
  display: inline-block;
  animation: tickerPulse 1.8s ease-in-out infinite;
}
@keyframes tickerPulse {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.ticker__sep { color: var(--text-muted); margin: 0 4px; }
.ticker__time { color: var(--accent-br); }
@media (max-width: 900px) {
  .ticker { display: none; }   /* keep mobile bottom row uncluttered */
}

/* ===================== 39. SOUND TOGGLE =====================
   Stacked directly ABOVE the back-to-top button on the same right gutter.
   Smaller hairline style — never overlaps the back-to-top circle. */
.sound-toggle {
  position: fixed;
  /* back-to-top is 60px tall starting at bottom = s-5; sit 12px above it */
  bottom: calc(var(--s-5) + 60px + 12px + var(--safe-b));
  right: calc(var(--s-5) + 14px + var(--safe-r));   /* aligns to back-to-top's horizontal centre */
  z-index: var(--z-float);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  background: rgba(10,10,11,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .3s var(--e-out), border-color .3s var(--e-out);
}
.sound-toggle:hover { color: var(--accent-br); border-color: var(--accent-br); }
.sound-toggle.is-on { color: var(--accent); border-color: var(--accent); }
.sound-toggle svg { width: 14px; height: 14px; }
.sound-toggle .sound-toggle__off { display: block; }
.sound-toggle .sound-toggle__on  { display: none; }
.sound-toggle.is-on .sound-toggle__off { display: none; }
.sound-toggle.is-on .sound-toggle__on  { display: block; }
@media (max-width: 640px) { .sound-toggle { display: none; } }

/* ===================== 40. REFINED IMAGE HOVER =====================
   Service preview already has a clip-reveal; layer on a faint magenta duotone
   shift + zoom on hover so the image gains a touch of life. */
@media (min-width: 900px) {
  .service__preview img { transition: transform 1.4s var(--e-out), filter 0.6s var(--e-out); }
  .service:hover .service__preview img {
    transform: scale(1.06);
    filter: brightness(0.72) contrast(1.08) saturate(0.82) hue-rotate(-8deg);
  }
}

/* When over a service row, ring grows + label says VIDI under the ring */
.cursor__label {
  position: absolute;
  top: 100%; left: 50%;
  margin-top: 10px;
  transform: translate(-50%, 0);
  font-family: var(--font-tech);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-br);
  opacity: 0;
  transition: opacity .3s var(--e-out), transform .3s var(--e-out);
  pointer-events: none;
  white-space: nowrap;
}
.cursor.is-vidi .cursor__label { opacity: 1; transform: translate(-50%, 4px); }

/* ===================== 41. KEEP FLOAT BUTTONS CLEAR OF TICKER ===================== */
@media (min-width: 900px) {
  /* No layout change needed — ticker is centered, AI is left, top is right */
}

/* ===================== 42. CTA — MATCH HERO COLUMN (left-x parity) =================
   The hero text column sits inside `.container.hero__container` — i.e. it inherits
   `.container`'s width cap + horizontal centering + gutter padding. To get the CTA
   headline's left edge to land exactly on the hero headline's left edge, the
   `.cta__container--center` MUST share the exact same width/centering/padding as
   `.container` — meaning we must NOT override its margin-left or max-width here.
   We only cap the *inner* text widths and left-align them inside the column.

   Markup stays unchanged across all 5 pages (index, o-nama, kontakt, usluge,
   usluga): `<div class="container cta__container cta__container--center">`.
   ================================================================================ */
.cta__container.cta__container--center {
  /* Inherit .container's width / margin auto / gutter padding — DO NOT override */
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  text-align: left;
  align-items: flex-start;
}

.cta__container--center .eyebrow {
  display: inline-flex;
  justify-content: flex-start;
}
.cta__container--center .cta__title {
  max-width: 26ch;        /* matches .hero__title max-width: 26ch */
  margin-left: 0;
  margin-right: 0;
}
.cta__container--center .cta__sub {
  max-width: 44ch;
  margin-left: 0;
  margin-right: 0;
}

.cta__actions--center {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--s-4);
}
@media (min-width: 640px) {
  .cta__actions--center {
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
  }
}

.cta__bg-slashes {
  /* Decorative slashes pushed off to the right so they cannot compete with
     the left-aligned column. */
  right: 4vw;
}

/* ===================== 43. AI PANEL — pulse halt + timestamps + polish ===================== */
.fbtn--ai.is-active::before {
  /* Stop the idle pulse while the panel is open */
  animation: none;
  opacity: 0;
}
.fbtn--ai.is-active {
  border-color: var(--accent);
  color: var(--accent-br);
}

.ai-msg__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ai-msg__who {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ai-msg--bot .ai-msg__who { color: var(--accent-br); }
.ai-msg__time {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .15em;
  color: var(--text-muted);
  opacity: .8;
}
.ai-msg__body {
  margin-top: 4px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
}

/* ===================== 44. SIDE PROGRESS RAIL ===================== */
.rail {
  position: fixed;
  top: 50%;
  right: calc(var(--gutter) + var(--safe-r));
  transform: translateY(-50%);
  z-index: var(--z-float);
  opacity: 0;
  transition: opacity .6s var(--e-out);
  pointer-events: none;
}
.rail.is-ready { opacity: 1; pointer-events: auto; }
.rail__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0;
  border-left: 1px solid var(--hairline);
  padding-left: 14px;
}
.rail__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 0;
  transition: color .3s var(--e-out);
}
.rail__list a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  background: var(--hairline);
  transition: background .3s var(--e-out), transform .3s var(--e-out);
}
.rail__num {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s var(--e-out), transform .3s var(--e-out);
}
.rail__name {
  transition: color .3s var(--e-out);
}
.rail__list a:hover,
.rail__list a.is-active {
  color: var(--text);
}
.rail__list a.is-active::before {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.6);
}
.rail__list a.is-active .rail__num,
.rail__list a:hover .rail__num {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent-br);
}
@media (max-width: 1100px) {
  .rail { display: none; }    /* keep the layout uncluttered on narrow screens */
}

/* ===================== 45. LINK HOVER — minimal underline (nav) + mask-swap (footer only) =====================
   Earlier this section put a dual-layer mask-swap on BOTH nav and footer
   links. On the nav it read as "doubled/garbled letters" (the magenta
   clone showing through the original). We've removed that for nav and
   replaced it with a clean, scaleX magenta underline (defined inline below
   so it lives next to the rest of the nav refinements). The mask-swap
   stays on `.footer__col a` where it works fine on smaller, isolated
   labels. */

/* — NAV LINKS (desktop) — clean single-layer + animated underline — */
.nav__links a {
  position: relative;
  display: inline-block;
  overflow: visible;             /* drop overflow:hidden from the old style */
  font-family: var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .14em;
  /* Slightly larger for presence; same font family */
  font-size: clamp(.875rem, 1vw, 1rem);
  line-height: 1.4;
  color: var(--text);
  padding: 8px 0;
  transition: color .25s var(--e-out);
}
.nav__links a > span:first-child {
  display: inline;
  transform: none !important;    /* kill any stray inherited transform */
  transition: none;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--e-out);
  /* and unset any leftovers from the old mask-swap rules */
  color: transparent;
  white-space: normal;
  pointer-events: none;
}
.nav__links a:hover,
.nav__links a:focus-visible,
.nav__links a.is-current {
  color: var(--text);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.is-current::after { transform: scaleX(1); }

/* When retracting on mouse-out, retract toward the RIGHT (transform-origin
   flips to the right edge for a smooth exit). Pure CSS, no JS needed. */
.nav__links a:not(:hover):not(:focus-visible):not(.is-current)::after {
  transform-origin: 100% 50%;
}

/* — FOOTER COLUMNS — keep the original mask-swap, scoped to footer only — */
.footer__col a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.4;
}
.footer__col a > span:first-child {
  display: inline-block;
  transition: transform .4s var(--e-out);
}
.footer__col a::after {
  content: attr(data-label);
  position: absolute;
  left: 0; right: 0; top: 0; bottom: auto;
  height: auto;
  background: none;
  display: inline-block;
  color: var(--accent-br);
  transform: translateY(100%);
  transition: transform .4s var(--e-out);
  pointer-events: none;
  white-space: nowrap;
}
.footer__col a:hover > span:first-child { transform: translateY(-100%); }
.footer__col a:hover::after             { transform: translateY(0); }

/* — MOBILE MENU — keep its existing larger styling, but no swap garble — */
.nav-mobile li a {
  position: relative;
  overflow: visible;
}
.nav-mobile li a::after {
  /* In case any inherited rule tries to inject mask-swap content */
  content: none;
}

/* ===================== 46. FOOTER CREDIT ===================== */
.footer__credit {
  color: var(--text-muted);
  letter-spacing: .12em;
}
.footer__credit a {
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
  margin-left: 4px;
  padding-bottom: 2px;
  transition: color .25s var(--e-out), border-color .25s var(--e-out);
}
.footer__credit a:hover { color: var(--accent-br); border-bottom-color: var(--accent-br); }

/* ===================== 47. VELOCITY-DRIVEN ELEMENTS ===================== */
[data-velocity] {
  transform-origin: 0 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-velocity] { transform: none !important; }
}

/* ===================== 23. REDUCED MOTION ===================== */

/* ===================== 23. REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal="fade"],
  .js .line-inner,
  .js [data-reveal="words"] .word { opacity: 1 !important; transform: none !important; }
  .js .service::before,
  .js .approach__line span { transform: scaleY(1) !important; }
  .preloader { display: none; }
  .cursor    { display: none; }
  .hero__cue-line { animation: none; }
}


/* ===================== 50. CTA TEXT SCRIM (AA contrast guarantee) =====================
   Radial dark scrim behind the centered CTA column. The image stays bright
   at the edges; the central text column gets reliable contrast for white
   type. text-shadow as a second line of defense. */
.cta__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.20) 70%,
      rgba(0,0,0,0)   100%);
}
.cta__container { position: relative; z-index: 2; }
.cta__title,
.cta__sub {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5);
}


/* ===================== 51. LANGUAGE TOGGLE (SR / EN) ===================== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tech);
  font-size: .8125rem;
  letter-spacing: .12em;
  color: var(--text-muted);
  user-select: none;
}
.lang-toggle__btn {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  transition: color .25s var(--ease-out);
  position: relative;
}
.lang-toggle__btn:hover { color: var(--accent-br); }
.lang-toggle__btn.is-active { color: var(--text); }
.lang-toggle__btn.is-active::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; bottom: 0;
  height: 1px;
  background: var(--accent);
}
.lang-toggle__sep { opacity: .4; }
.nav__inner .lang-toggle { margin-left: var(--s-3); }

.nav-mobile .lang-toggle {
  margin-top: var(--s-5);
  font-size: 1rem;
}


/* ===================== 52. TRUST STRIP (used on O nama + footer) ===================== */
.trust {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-5);
}
@media (min-width: 900px) {
  .trust__grid { grid-template-columns: repeat(5, 1fr); }
}
.trust__item {
  display: flex; flex-direction: column;
  gap: 6px;
  padding-right: var(--s-4);
}
.trust__tick {
  font-family: var(--font-tech);
  color: var(--accent);
  font-size: .75rem;
  letter-spacing: .15em;
}
.trust__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--text);
}


/* ===================== 53. COMPANY FACTS PANEL (O nama) ===================== */
.facts {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--hairline);
}
.facts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.facts__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 640px) {
  .facts__row { grid-template-columns: 220px 1fr; align-items: baseline; gap: var(--s-5); }
}
.facts__key {
  font-family: var(--font-tech);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts__val {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--text);
}
.facts__val--accent { color: var(--accent-br); }


/* ===================== 54. DIRECTOR BLOCK (O nama) ===================== */
.director {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--hairline);
}
.director__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 900px) {
  .director__grid { grid-template-columns: 1fr 1.4fr; gap: var(--s-6); align-items: start; }
}
.director__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-elev);
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.director__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.85);
}
.director__visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
.director__body { display: flex; flex-direction: column; gap: var(--s-4); }
.director__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.02em;
  line-height: 1;
}
.director__role {
  font-family: var(--font-tech);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: .8125rem;
}
.director__bio { color: var(--text-muted); max-width: 62ch; line-height: 1.6; }


/* ===================== 55. AREAS GRID (O nama) ===================== */
.areas {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--hairline);
}
.areas__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 640px) { .areas__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .areas__list { grid-template-columns: repeat(3, 1fr); } }
.areas__item {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
@media (min-width: 640px) {
  .areas__item { border-right: 1px solid var(--hairline); padding-right: var(--s-5); }
  .areas__item:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1100px) {
  .areas__item:nth-child(2n)  { border-right: 1px solid var(--hairline); }
  .areas__item:nth-child(3n)  { border-right: 0; }
}
.areas__num {
  font-family: var(--font-tech);
  color: var(--accent);
  font-size: .75rem;
  letter-spacing: .15em;
}
.areas__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--text);
}


/* ===================== 56. CONTACT PAGE — info + form ===================== */
.contact-hero {
  padding: calc(var(--nav-h, 80px) + var(--s-7)) 0 var(--s-6);
  border-bottom: 1px solid var(--hairline);
}
.contact-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  max-width: 18ch;
}

.contact-grid {
  padding: var(--s-6) 0 var(--s-7);
  border-bottom: 1px solid var(--hairline);
}
.contact-grid__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 900px) {
  .contact-grid__inner { grid-template-columns: 1fr 1.2fr; gap: var(--s-6) var(--s-7); }
}
.contact-info {
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.contact-info__block {
  display: flex; flex-direction: column;
  gap: 6px;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.contact-info__block:last-child { border-bottom: 0; }
.contact-info__label {
  font-family: var(--font-tech);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-info__value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--text);
}
.contact-info__value a {
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.contact-info__value a:hover { color: var(--accent-br); border-bottom-color: var(--accent-br); }


/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-tech);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field__input,
.field__textarea {
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field__textarea { resize: vertical; min-height: 160px; }
.field__input:hover,
.field__textarea:hover { border-color: var(--text-muted); }
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.18);
}
.field__input:invalid:not(:placeholder-shown),
.field__textarea:invalid:not(:placeholder-shown) {
  border-color: #ff5577;
}
.field__hint { font-size: .8125rem; color: var(--text-muted); }
.field__error { font-size: .8125rem; color: #ff7799; min-height: 1em; }

.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-3);
}
.form-status {
  font-family: var(--font-tech);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.form-status--ok    { color: #6efbd0; }
.form-status--err   { color: #ff7799; }
.form-status--info  { color: var(--text-muted); }


/* ===================== 57. MAP ===================== */
.map {
  padding: 0 0 var(--s-7);
  border-bottom: 1px solid var(--hairline);
}
.map__frame {
  position: relative;
  aspect-ratio: 16 / 7;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.map__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  /* Soft dark/duotone treatment via filter on the static fallback image.
     iframes from OSM render in their own theme; we accept that for now. */
  filter: grayscale(.4) contrast(1.05) brightness(0.85);
}
.map__overlay {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hairline);
  font-family: var(--font-tech);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.map__overlay a { color: var(--accent-br); }


/* ===================== 58. INNER-PAGE HERO (lighter than homepage) ===================== */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h, 80px) + var(--s-7)) 0 var(--s-7);
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
  overflow: hidden;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: .95;
  letter-spacing: -.03em;
  max-width: 18ch;
  margin-top: var(--s-3);
}
.page-hero__lede {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--text-muted);
  max-width: 56ch;
  margin-top: var(--s-4);
  line-height: 1.55;
}


/* ===================== 59. INNER-PAGE HERO IMAGES (.has-hero-image) =====================
   Applied on .page-hero or .contact-hero. Drops a full-bleed background
   image + directional dark scrim + a faint magenta duotone tint behind
   the text, matching the homepage hero treatment. Content is visible by
   default (img + CSS only, no JS dependency). */
.page-hero.has-hero-image,
.contact-hero.has-hero-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(440px, 62vh, 720px);
  padding-top: calc(var(--nav-h, 80px) + var(--s-7));
  padding-bottom: var(--s-7);
  display: flex;
  align-items: flex-end;
}
.page-hero.has-hero-image > .container,
.contact-hero.has-hero-image > .container {
  width: 100%;
  position: relative;
  z-index: 3;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);          /* fallback if image fails to load */
}
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.82) contrast(1.05) saturate(0.95);
  animation: heroKenburns 28s ease-in-out infinite alternate;
}
@keyframes heroKenburns {
  from { transform: scale(1.00) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}

.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0.12) 100%),
    radial-gradient(ellipse 65% 60% at 25% 70%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
}

.page-hero__duotone {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 80% 18%, rgba(230, 0, 126, 0.12) 0%, rgba(230, 0, 126, 0) 60%);
  mix-blend-mode: screen;
}

/* Text contrast over image */
.has-hero-image .page-hero__title,
.has-hero-image .contact-hero__title,
.has-hero-image .page-hero__lede,
.has-hero-image .eyebrow {
  text-shadow: 0 2px 14px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.55);
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__media img { animation: none; }
}


/* ===================== 60. USLUGE PAGE — clickable service cards ===================== */
.services__list a.service,
.services__list .service--linked {
  color: var(--text);
  text-decoration: none;
}
.services__list a.service { display: grid; }
.services__list a.service:hover .service__title { color: var(--accent-br); }


/* ===================== 61. LIGHT-PALETTE SECTION — DISABLED ===========================
   The light-mode-scoped override was applied to the Stats / "Brojke" section,
   but the design direction reverted to a fully dark site. The rule block has
   been stripped out so it cannot accidentally re-fire if the class is added
   somewhere later. Keep this header in place as a marker of the prior intent.
   To re-enable, restore from git history.
   ============================================================================ */


/* ===================== 62. NODE-NETWORK CANVAS (signature interactive) =====================
   The .nodenet canvas is injected by js/modules/nodenet.js into a section
   marked with [data-nodenet]. It is positioned absolutely behind the
   content and is pointer-events:none so clicks pass through. Hidden on
   reduced motion and on coarse pointer (touch). */
.nodenet {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .nodenet { display: none; } }
@media (pointer: coarse)               { .nodenet { display: none; } }
/* Section that hosts the canvas must establish a stacking context so the
   canvas sits behind the foreground content. */
[data-nodenet] {
  position: relative;
  isolation: isolate;
}
[data-nodenet] > .container,
[data-nodenet] > .manifesto__grid {
  position: relative;
  z-index: 1;
}


/* ===================== 63. CURSOR CONTEXTUAL LABEL ===================== */
.cursor__label {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-br);
  opacity: 0;
  transform: translate(-50%, 18px) translateY(4px);
  transition: opacity .25s var(--e-out), transform .25s var(--e-out);
  pointer-events: none;
  white-space: nowrap;
}
.cursor.is-hover .cursor__label { opacity: 1; transform: translate(-50%, 22px); }
/* Ring turns magenta over any interactive element */
.cursor.is-hover .cursor__ring {
  border-color: var(--accent);
}


/* ===================== 64. PRELOADER → NAV LOGO MORPH (clone helper) ===================== */
.morph-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  /* width/height/transform are written inline at runtime */
  transition: transform .8s var(--e-out), opacity .25s ease-out;
  transform-origin: 0 0;
  will-change: transform;
}
.morph-clone img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.nav__logo.is-handoff img { opacity: 0; }


/* ===================== 65. MOBILE RESPONSIVENESS PASS ==============================
   Single block of mobile-specific overrides addressing the issues found in
   the QA audit at 360/390/414/768. See the report at the bottom of this
   file's commit message for the per-breakpoint findings.

   Principles:
   - Document width MUST equal viewport width (no horizontal scroll).
   - Floating UI (AI + back-to-top + ticker) must not collide with each
     other or with the footer.
   - The right side-rail is already hidden ≤1100px (see §44 rule).
   - Hero content scales fluidly via clamp(); we tighten clamps where the
     existing minima are still too large at 360.
   - Tap targets are ≥44px (floating buttons currently 52px on mobile — OK).
   ============================================================================ */

/* No horizontal scroll, ever. Belt-and-suspenders guard for any rogue
   absolute-positioned element that might overhang. */
html, body { max-width: 100%; }
html { overflow-x: hidden; }
body { overflow-x: clip; }   /* `clip` is the non-scroll-creating sibling of `hidden`; supported in evergreens */

/* The ticker overflows + collides with the floating buttons on small
   viewports. Hide it ≤640px — the same info is in the footer and on the
   contact page. */
@media (max-width: 640px) {
  .ticker { display: none; }

  /* With the ticker gone, give the floating buttons a bit more breathing
     room from the bottom edge. */
  .float { bottom: calc(var(--s-4) + var(--safe-b) + 4px); }
}

/* Hero mobile tuning — keep logo+headline fully inside the gutter, and
   pull the indicators up so they don't sit under the floating buttons. */
@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--s-7) + 24px);
    padding-bottom: var(--s-6);
    min-height: 92svh;
  }
  .hero__logo {
    max-width: min(100%, 420px);
  }
  .hero__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    max-width: 22ch;
  }
  .hero__sub { font-size: 1rem; }
  .hero__indicators { bottom: calc(var(--s-6) + 70px + var(--safe-b)); }
  .hero__cue { display: none; }      /* the "SKROL" cue + line column gets cramped */
}

/* CTA on mobile — keep matching the hero column (so .container's gutter
   padding drives the left edge), but tighten the inner text caps so the
   headline never overflows the gutter on 360px. */
@media (max-width: 640px) {
  .cta { padding: var(--s-6) 0; }
  .cta__container--center .cta__title {
    font-size: clamp(2rem, 9vw, 3rem);
    max-width: 18ch;
  }
  .cta__container--center .cta__sub { max-width: 100%; }
  .cta__bg-slashes { display: none; }    /* decorative slashes get in the way */
}

/* Nav on mobile — hide the lang toggle next to the (now visible) burger,
   the toggle still lives inside the mobile fullscreen menu. The desktop
   toggle would otherwise crowd the nav bar on 360. */
@media (max-width: 899.98px) {
  .nav__inner > .lang-toggle { display: none; }
  .nav__inner { gap: var(--s-4); }
}

/* Mobile menu hardening — make sure SR/EN toggle + CTA reachable. */
.nav-mobile__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.nav-mobile .lang-toggle { align-self: flex-start; }
.nav-mobile__email { margin-top: auto; }

/* Footer on small viewports — columns stack cleanly (already do via
   grid-template-columns:1fr default), but the base row of slashes +
   © text + credit needs `flex-wrap: wrap` to avoid horizontal scroll on
   very narrow screens. The base rule already flex-wraps; this just
   guarantees tight stacking + line-height on stacked credit. */
@media (max-width: 639.98px) {
  .footer__base { gap: var(--s-3); }
  .footer__credit { line-height: 1.6; }
  .footer__inner { gap: var(--s-5); }
  .footer__logo { max-width: 180px; height: 32px; }
}

/* Hero indicators — make sure they don't share vertical space with the
   floating buttons even at 768px. */
@media (max-width: 900px) {
  .hero__indicators {
    bottom: max(var(--s-5), calc(var(--s-6) + 50px));
  }
}

/* AI panel on mobile — already a fullscreen-ish sheet, but ensure the
   floating launcher button isn't covered by it when transitioning. The
   panel already has higher z-index; this is just defensive. */
@media (max-width: 640px) {
  .ai-panel { left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + var(--safe-b)); }
}