/* ============================================
   FONTS (self-hosted)
============================================= */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   TOKENS
============================================= */
:root {
  --accent: #0037ff;
  --accent-dim: rgba(0, 55, 255, 0.08);
  --accent-line: rgba(0, 55, 255, 0.22);

  --bg: #fcfcfd;
  --surface: #f4f5f8;
  --ink: #0a0a0c;
  --ink-soft: #4a4b52;
  --ink-faint: #8b8c93;
  --border: rgba(10, 10, 12, 0.1);
  --border-strong: rgba(10, 10, 12, 0.16);

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 120px;
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ============================================
   RESET
============================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.9s var(--ease-in-out);
}
/* Color-invert zone: from the moment the clients sphere section
   reaches the viewport (toggled by scroll position in initSphereZone,
   main.js) through the rest of the page, the background flips to
   accent blue and the ambient bg-paths lines flip to white; the
   text/border colors of every section from that point on (manifesto,
   contact, footer) get light-on-blue overrides here so they stay
   readable. Reverts on the way back up past that point. */
body.is-blue-zone { background: var(--accent); }
body.is-blue-zone .bg-paths path { stroke: #fff; }
body.is-blue-zone .sphere-section__heading span { color: #fff; }

body.is-blue-zone .manifesto__text { color: #fff; }

body.is-blue-zone .contact { border-top-color: rgba(255, 255, 255, 0.25); }
body.is-blue-zone .contact__headline,
body.is-blue-zone .contact__headline-hover { color: #fff; }
body.is-blue-zone .contact__email { color: #fff; }
body.is-blue-zone .contact__email::after { background: #fff; }
body.is-blue-zone .contact__phone { color: rgba(255, 255, 255, 0.7); }
body.is-blue-zone .contact .section-title { color: #fff; }

body.is-blue-zone .footer { border-top-color: rgba(255, 255, 255, 0.25); }
body.is-blue-zone .footer__top { border-bottom-color: rgba(255, 255, 255, 0.25); }
body.is-blue-zone .footer__logo { color: #fff; }
body.is-blue-zone .footer__social { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
body.is-blue-zone .footer__social:hover { border-color: #fff; }
body.is-blue-zone .footer__bottom { color: rgba(255, 255, 255, 0.65); }
body.is-blue-zone .footer__top-btn { color: rgba(255, 255, 255, 0.85); }
body.is-blue-zone .footer__top-btn:hover { color: #fff; }

.manifesto__text,
.contact, .contact__headline, .contact__headline-hover, .contact__email,
.contact__email::after, .contact__phone, .contact .section-title,
.footer, .footer__top, .footer__logo, .footer__social, .footer__bottom,
.footer__top-btn {
  transition: color 0.9s var(--ease-in-out), border-color 0.9s var(--ease-in-out), background-color 0.9s var(--ease-in-out);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: #fff; }

/* ============================================
   LOADER - HUD-style boot screen. Deep near-black stage (the one
   deliberate departure from the page's light theme lock - this is
   a transient pre-content overlay, not a page section, so it isn't
   bound by that rule) with corner brackets, a scanline texture, a
   rotating hex mark, and a glowing wordmark reveal over a shimmering
   progress bar. Closes into a circle at center on complete (GSAP,
   see main.js) revealing the light page beneath - the contrast is
   the point.
============================================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #05060a;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  clip-path: circle(150% at 50% 50%);
  overflow: hidden;
}
.loader__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0, 55, 255, 0.16), transparent 65%),
    linear-gradient(180deg, #06070d 0%, #030308 100%);
}
.loader__glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 55, 255, 0.32) 0%, transparent 62%);
  filter: blur(30px);
  animation: loader-glow-pulse 3.4s ease-in-out infinite;
}
@keyframes loader-glow-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
.loader__particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 85%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(2px 2px at 28% 92%, rgba(77, 120, 255, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 80%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(2px 2px at 60% 95%, rgba(77, 120, 255, 0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 84%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(2px 2px at 88% 90%, rgba(77, 120, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 20% 70%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 72%, rgba(77, 120, 255, 0.4), transparent 60%);
  background-repeat: no-repeat;
  animation: loader-particles-rise 3.6s linear infinite;
}
@keyframes loader-particles-rise {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 0.9; }
  to { background-position: 0 -160%, 0 -190%, 0 -140%, 0 -175%, 0 -155%, 0 -200%, 0 -130%, 0 -165%; opacity: 0.15; }
}
.loader__scanlines {
  position: absolute;
  inset: -10% -10%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.045) 0px,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.5;
  animation: loader-scan 5s linear infinite;
}
@keyframes loader-scan {
  from { transform: translateY(0); }
  to { transform: translateY(3px); }
}
.loader__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
}
.loader__corner--tl { top: 26px; left: 26px; border-right: none; border-bottom: none; }
.loader__corner--tr { top: 26px; right: 26px; border-left: none; border-bottom: none; }
.loader__corner--bl { bottom: 26px; left: 26px; border-right: none; border-top: none; }
.loader__corner--br { bottom: 26px; right: 26px; border-left: none; border-top: none; }

.loader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.loader__logo {
  position: relative;
  width: clamp(200px, 30vw, 320px);
  animation: loader-logo-in 1s var(--ease-out) both;
}
.loader__logo-img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 0 34px rgba(0, 55, 255, 0.55)) drop-shadow(0 0 70px rgba(0, 55, 255, 0.25));
}
@keyframes loader-logo-in {
  from { opacity: 0; transform: scale(0.88) translateY(12px); filter: blur(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.loader__tip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.loader__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(26px, 5vh, 48px);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(26px, 5vw, 56px);
}
.loader__tag,
.loader__location {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  white-space: nowrap;
}
.loader__meta {
  flex: 1 1 auto;
  max-width: 480px;
  margin: 0 auto;
}
.loader__bar-track {
  position: relative;
  height: 6px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 10px;
}
.loader__bar {
  position: relative;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  overflow: hidden;
  background: repeating-linear-gradient(
    45deg,
    var(--accent) 0 8px,
    #4d78ff 8px 16px
  );
  animation: barber-stripe 0.6s linear infinite;
  box-shadow: 0 0 10px rgba(0, 55, 255, 0.85), 0 0 22px rgba(0, 55, 255, 0.45);
}
/* 16px stripe period along the 45deg axis = 16*sqrt(2) along a pure
   X shift, so the loop resets with no visible seam. */
@keyframes barber-stripe {
  from { background-position: 0 0; }
  to { background-position: 22.63px 0; }
}
.loader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: loader-shimmer 1.3s ease-in-out infinite;
}
@keyframes loader-shimmer {
  from { transform: translateX(-140%); }
  to { transform: translateX(340%); }
}
.loader__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.loader__status-label::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: pulse-dot 1s ease-in-out infinite;
}
.loader__count {
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-weight: 500;
}
.loader__count::after {
  content: '%';
  color: var(--accent);
}
@media (max-width: 640px) {
  .loader__tag, .loader__location { display: none; }
  .loader__footer { padding: 0 24px; }
}

/* ============================================
   CUSTOM CURSOR (desktop, hover-capable, motion allowed)
============================================= */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}
.cursor {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.cursor.is-active { opacity: 1; }
.cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  will-change: transform;
}
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  will-change: transform;
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.cursor.is-hover .cursor__ring {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--accent);
  background: var(--accent-dim);
}
.cursor.is-hover .cursor__dot { opacity: 0; }

/* Blue zone: the accent-colored cursor dot/ring disappear against
   the matching blue background, so both flip to white while active. */
body.is-blue-zone .cursor__dot { background: #fff; }
body.is-blue-zone .cursor__ring { border-color: rgba(255, 255, 255, 0.55); }
body.is-blue-zone .cursor.is-hover .cursor__ring {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

/* ============================================
   BACKGROUND PATHS - absolutely positioned against the page (not
   fixed to the viewport), so the lines scroll WITH the content:
   as you scroll down the page moves up and the lines travel with
   it, same as everything else, instead of hovering static on
   screen. Height is set in JS to the full document height so the
   pattern (tiled in repeating bands, see initBackgroundPaths in
   main.js) covers top to bottom with nothing left uncovered. Sits
   below main/footer (z-index scheme below) so ordinary page content
   - text, photos, video - paints over it and hides it wherever it's
   opaque, with no per-element logic needed.
============================================= */
.bg-paths {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.bg-paths__svg {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
}
/* One drifting transform per layer instead of per path - two cheap,
   GPU-composited animations instead of the ~170 individual
   stroke-dashoffset loops (plus a filter) this used to run, which
   was the main cause of dropped frames on the whole site. The 2%
   oversize + inset above keeps the drift from ever revealing an
   edge. */
.bg-paths__svg:first-child { animation: bg-paths-drift-a 28s ease-in-out infinite; }
.bg-paths__svg:last-child { animation: bg-paths-drift-b 34s ease-in-out infinite; }
.bg-paths path { transition: stroke 0.9s var(--ease-in-out); }
@keyframes bg-paths-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, -12px); }
}
@keyframes bg-paths-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-14px, 14px); }
}

/* Content sits above the paths layer; the grain/nav/overlays above
   that already carry their own higher z-index values. */
main, .footer {
  position: relative;
  z-index: 2;
}

/* ============================================
   GRAIN OVERLAY
============================================= */
.grain {
  position: fixed;
  inset: -100px;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   NAV
============================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-h);
  max-height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(252, 252, 253, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
  transition: height 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.nav.is-compact {
  height: 96px;
  background: rgba(252, 252, 253, 0.92);
}
.nav__logo {
  display: flex;
  align-items: center;
}
.nav__logo-img {
  width: auto;
  height: 88px;
  object-fit: contain;
  transition: height 0.4s var(--ease-out);
}
.nav.is-compact .nav__logo-img {
  height: 68px;
}
@media (max-width: 767px) {
  .nav__logo-img { height: 56px; }
  .nav.is-compact .nav__logo-img { height: 46px; }
}
.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
}
.nav__links {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
}
.lang-switch {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 12px;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.lang-switch:hover { color: var(--accent); border-color: var(--accent); }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out);
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: var(--underline-origin, left);
}
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 190;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--gutter);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s;
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(32px, 10vw, 48px);
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: block;
}

/* ============================================
   MOBILE BOTTOM TAB BAR
============================================= */
.mobile-tabbar {
  display: none;
}
@media (max-width: 767px) {
  .nav__toggle { display: none; }
  .footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 116px); }

  .mobile-tabbar {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 210;
    height: 84px;
    padding: 18px 6px;
    gap: 10px;
    background: rgba(252, 252, 253, 0.86);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    box-shadow: 0 12px 32px -12px rgba(10, 10, 12, 0.22);
    animation: tabbar-in 0.6s var(--ease-out) both;
    animation-delay: 0.15s;
  }
}
@keyframes tabbar-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mobile-tabbar__item {
  flex: 0 0 auto;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 15px;
  color: var(--ink-soft);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.15s var(--ease-out);
}
.mobile-tabbar__item:active {
  transform: scale(0.9);
  background: var(--accent-dim);
  color: var(--accent);
}
.mobile-tabbar__icon {
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out);
}
.mobile-tabbar__item:active .mobile-tabbar__icon {
  transform: scale(1.12) rotate(-6deg);
}
.mobile-tabbar__icon--menu {
  flex-direction: column;
  gap: 5px;
}
.mobile-tabbar__icon--menu span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.mobile-tabbar__item[aria-expanded="true"] .mobile-tabbar__icon--menu span:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}
.mobile-tabbar__item[aria-expanded="true"] .mobile-tabbar__icon--menu span:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}
.mobile-tabbar__item[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-dim);
}
.mobile-tabbar__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.mobile-tabbar__cta {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 15px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s var(--ease-out), box-shadow 0.25s var(--ease-out);
  box-shadow: 0 0 0 0 rgba(0, 55, 255, 0.4);
  animation: cta-pulse 2.6s ease-in-out infinite;
}
.mobile-tabbar__cta svg {
  transition: transform 0.3s var(--ease-out);
}
.mobile-tabbar__cta:active {
  transform: scale(0.96);
}
.mobile-tabbar__cta:active svg {
  transform: translate(3px, -3px);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 55, 255, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(0, 55, 255, 0); }
}

/* ============================================
   LAYOUT HELPERS
============================================= */
.section-head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.word-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.word-reveal > span { display: inline-block; }

/* ============================================
   HERO
============================================= */
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  position: relative;
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.hero__left { max-width: 620px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 28px;
}
.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
}
.hero__line { display: block; overflow: hidden; }
.hero__line--accent { color: var(--accent); }

.hero__subtext {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-soft);
  max-width: 46ch;
  line-height: 1.55;
  margin-bottom: 32px;
}

.hero__actions { display: flex; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 26px;
  border-radius: 999px;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn svg { transition: transform 0.3s var(--ease-out); }
.btn--primary:hover svg { transform: translate(2px, -2px); }

.hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
}
.hero-visual__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 55, 255, 0.45);
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__right { order: -1; margin-bottom: 12px; }
  .hero-visual { width: min(100%, 420px); }
  .hero__left { max-width: 100%; }
}
@media (max-width: 480px) {
  .hero__right { margin-bottom: 4px; }
  .hero-visual { width: 100%; }
}

/* ============================================
   ABOUT
============================================= */
.about {
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--border);
}
.about__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}
.about__lead {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.about__body {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 52ch;
}
@media (max-width: 767px) {
  .about__grid { grid-template-columns: 1fr; }
}

/* ============================================
   MAGNETIC TEXT - a circle chases the cursor over the base word;
   inside the circle the hover word renders at a counter-translated
   position so it stays visually pinned to the container regardless
   of where the circle currently is, reading as a spotlight scrubbing
   over a second, hidden layer of text. Built by initMagneticText in
   main.js (desktop/hover-capable + motion-allowed only).
============================================= */
.magnetic {
  padding: clamp(50px, 7vw, 90px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
}
.magnetic-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Typography is scoped to the standalone showcase section rather
   than set generically, so the Book headline below can reuse the
   same hover-circle structure while keeping its own (much larger,
   wrapping) heading type. */
.magnetic .magnetic-text__base,
.magnetic .magnetic-text__hover {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 8.5vw, 110px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.magnetic-text__base { color: var(--ink); }
.magnetic-text__hover { color: #fff; }
.magnetic-text__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--accent);
  overflow: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
  transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1), height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.magnetic-text__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* ============================================
   MARQUEE
============================================= */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 22px 0;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.marquee__track span:not(.marquee__dot) {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 500;
  color: var(--ink-faint);
}
.marquee__dot { color: var(--accent); font-size: 20px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================
   WORK - expand-on-hover gallery. Each panel is a flex item; on
   hover/focus it grows to dominate the row while the rest compress
   to a sliver, then ease back when the pointer moves on. Falls back
   to a flat horizontal scroll strip under 768px, where hover has no
   meaning.
============================================= */
.work {
  padding: clamp(80px, 10vw, 140px) 0;
}
.gallery-expand {
  display: flex;
  gap: 8px;
  height: clamp(320px, 34vw, 420px);
  max-width: var(--container);
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
}
.gallery-expand__item {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  border: none;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  /* Slow, gentle curve (not the snappier --ease-out used elsewhere)
     since flex-grow drives an actual layout reflow, not just a
     compositor transform - a longer, smoother ease reads as an
     intentional zoom instead of a sudden jump. */
  transition: flex-grow 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.gallery-expand__item:hover,
.gallery-expand__item:focus-visible {
  flex-grow: 1.8;
}
.gallery-expand__item img,
.gallery-expand__item .gallery-item__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.05);
  transform: scale(1);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), filter 0.6s ease;
}
.gallery-expand__item:hover img,
.gallery-expand__item:hover .gallery-item__preview {
  transform: scale(1.09);
  filter: grayscale(0) contrast(1);
}
@media (max-width: 767px) {
  .gallery-expand {
    height: 280px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .gallery-expand::-webkit-scrollbar { display: none; }
  .gallery-expand__item {
    flex: 0 0 auto;
    width: 210px;
    scroll-snap-align: start;
  }
  .gallery-expand__item:hover,
  .gallery-expand__item:focus-visible { flex-grow: 0; }
}

.gallery-more {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  color: var(--accent);
  width: fit-content;
}
.gallery-more svg { transition: transform 0.3s var(--ease-out); }
.gallery-more:hover svg { transform: translate(3px, -3px); }

/* ============================================
   MORE CUTS - 3D rotating gallery (desktop) / flat horizontal
   scroll strip (mobile, same markup, media query swaps the layout).
   Cards are built and positioned by initRotatorGallery in main.js:
   mobile gets no inline transform and just flows through the flex
   strip below; desktop gets rotateY()/translateZ() placing each
   card around a ring, then rotation is driven by a GSAP tween
   (auto-rotate) or a drag handler, both writing to the same
   ring.style.transform - never mixed with a CSS transform
   animation on that element, which is what stalled the accordion
   and the hero orb earlier in this project.
============================================= */
.rotator {
  padding: clamp(60px, 8vw, 100px) 0 clamp(90px, 11vw, 150px);
  overflow: hidden;
}
.rotator-hint {
  display: none;
  max-width: var(--container);
  margin: 0 auto clamp(20px, 3vw, 32px);
  padding: 0 var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rotator-stage {
  position: relative;
  height: 300px;
}
.rotator-ring {
  position: relative;
  display: flex;
  gap: 12px;
  height: 100%;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.rotator-ring::-webkit-scrollbar { display: none; }
.rotator-card {
  position: relative;
  flex: 0 0 auto;
  width: 130px;
  height: 100%;
  border: none;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
}
.rotator-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4);
  transition: filter 0.4s var(--ease-out);
}
.rotator-card:hover img { filter: grayscale(0); }

@media (min-width: 768px) {
  .rotator-hint { display: block; }
  .rotator-stage {
    height: clamp(320px, 40vw, 460px);
    perspective: 1600px;
    cursor: grab;
  }
  .rotator-stage.is-dragging { cursor: grabbing; }
  .rotator-ring {
    display: block;
    overflow: visible;
    padding: 0;
    transform-style: preserve-3d;
  }
  .rotator-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 240px;
    will-change: transform, opacity;
  }
}

/* ============================================
   FOLLOW - one deliberate color-block moment (see Page Theme
   Lock exception in the design guide: allowed once per page).
============================================= */
.follow {
  background: var(--accent);
  color: #fff;
  padding: clamp(90px, 12vw, 150px) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.follow__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.reviews__track {
  display: flex;
  gap: 18px;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 8px;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  backdrop-filter: blur(6px);
}
.review-card__stars {
  color: #ffc94d;
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.review-card__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
@media (min-width: 900px) {
  .reviews__track {
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
  }
  .review-card { width: 300px; }
}
.btn--light {
  background: #fff;
  color: var(--accent);
}

/* ============================================
   LIGHTBOX
============================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 10, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  max-width: min(900px, 92vw);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 4px;
  display: block;
}
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }

/* ============================================
   SERVICES / ACCORDION
============================================= */
.services {
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--border);
}
.accordion {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.accordion__item {
  border-top: 1px solid var(--border);
}
.accordion__item:last-child { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  text-align: left;
}
.accordion__index {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  width: 28px;
  flex-shrink: 0;
}
.accordion__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  flex: 1;
  transition: color 0.3s var(--ease-out);
}
.accordion__item:hover .accordion__title { color: var(--accent); }
.accordion__icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.accordion__icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out), background 0.3s;
}
.accordion__icon span:nth-child(1) { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.accordion__icon span:nth-child(2) { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.accordion__item.is-open .accordion__icon span:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion__item.is-open .accordion__icon span:nth-child(1) { background: var(--accent); }

.accordion__panel {
  height: 0;
  overflow: hidden;
  transition: height 0.5s var(--ease-in-out);
}
.accordion__panel-inner { padding: 0 0 28px 52px; }
.accordion__panel-inner p {
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 56ch;
}

/* ============================================
   CLIENTS SPHERE
============================================= */
.sphere-section {
  padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(30px, 5vw, 60px);
  text-align: center;
}
.sphere-section__heading {
  max-width: 720px;
  margin: 0 auto clamp(28px, 4.5vw, 48px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sphere-section__heading span { display: block; transition: color 0.9s var(--ease-in-out); }
.sphere-section__heading span:last-child { color: var(--accent); }

.sphere-stage {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin: 0 auto;
  perspective: 1000px;
  cursor: grab;
  touch-action: none;
}
.sphere-stage.is-dragging { cursor: grabbing; }
.sphere-ring {
  position: relative;
  width: 100%;
  height: 100%;
}
.sphere-node {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(252, 252, 253, 0.85);
  box-shadow: 0 10px 26px -10px rgba(10, 10, 12, 0.4);
  cursor: pointer;
  will-change: transform, opacity;
  background: var(--surface);
  transition: box-shadow 0.25s var(--ease-out);
}
.sphere-node:hover { box-shadow: 0 14px 32px -8px rgba(0, 55, 255, 0.35); }
.sphere-node img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .sphere-stage { width: min(92vw, 380px); }
}

/* ============================================
   MANIFESTO
============================================= */
.manifesto {
  padding: clamp(100px, 14vw, 180px) var(--gutter);
  max-width: 1100px;
  margin: 0 auto;
}
.manifesto__text {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
}
.manifesto__text .word { opacity: 0.18; transition: opacity 0.05s linear; }

/* ============================================
   CONTACT
============================================= */
.contact {
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--border);
}
.contact__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.contact__headline,
.contact__headline-hover {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.magnetic-text--headline { margin-bottom: 40px; }
.contact__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  color: var(--accent);
  padding: 8px 4px;
  position: relative;
}
.contact__email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0.3);
  transform-origin: center;
  transition: transform 0.4s var(--ease-out);
}
.contact__email:hover::after { transform: scaleX(1); }
.contact__phone {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-faint);
}

/* Call / Visit / Hours - the practical block a local customer
   actually needs. Three columns on desktop, stacked on mobile. */
.contact__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  max-width: 860px;
  margin: clamp(48px, 7vw, 76px) auto 0;
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--border);
  text-align: left;
}
.contact__detail-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.contact__detail-value {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.contact__detail-value--link {
  position: relative;
  transition: color 0.3s var(--ease-out);
}
.contact__detail-value--link:hover { color: var(--accent); }
.contact__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}
.contact__hours-row--closed { color: var(--ink-faint); }

@media (max-width: 720px) {
  .contact__details {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .contact__hours-row { justify-content: center; gap: 12px; }
}

/* Blue-zone overrides (the contact block sits inside the inverted
   colour zone, so its ink-toned text needs the light treatment). */
body.is-blue-zone .contact__details { border-top-color: rgba(255, 255, 255, 0.25); }
body.is-blue-zone .contact__detail-label { color: rgba(255, 255, 255, 0.6); }
body.is-blue-zone .contact__detail-value { color: #fff; }
body.is-blue-zone .contact__detail-value--link:hover { color: rgba(255, 255, 255, 0.75); }
body.is-blue-zone .contact__hours-row--closed { color: rgba(255, 255, 255, 0.6); }

/* ============================================
   FOOTER
============================================= */
.footer {
  border-top: 1px solid var(--border);
  padding: 36px var(--gutter) 28px;
}
.footer__top {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}
.footer__socials { display: flex; gap: 16px; }
.footer__social {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.footer__social:hover { border-color: var(--accent); transform: translateY(-3px) rotate(-8deg); }
.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-faint);
}
.footer__top-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}
.footer__top-btn:hover { color: var(--accent); }
.footer__top-btn:active { transform: scale(0.95); }
.footer__social:active { transform: translateY(-1px) scale(0.94); }

/* ============================================
   REVEAL ANIMATION BASE STATES
   (JS adds .is-visible; these are the pre-animation states)
============================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

/* ============================================
   REDUCED MOTION
============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__line { overflow: visible; }
}

/* ============================================
   404 PAGE (404.html) - standalone page, reuses the site's tokens
   and .btn styles. Kept here rather than in an inline <style> so it
   stays inside the site's strict CSP (style-src 'self').
============================================= */
.notfound {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px var(--gutter);
  gap: 4px;
}
.notfound__logo {
  width: min(260px, 62vw);
  height: auto;
  margin-bottom: 8px;
}
.notfound__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 10px;
}
.notfound__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.notfound__text {
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: 30px;
}
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.notfound__link {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out);
}
.notfound__link:hover { color: var(--accent); }