/* ═══════════════════════════════════════════════
   TRINOVATA TECHNOLOGIES — Immersive Experience
   Light/Dark mode · Creative cursor · Nova motifs
   ═══════════════════════════════════════════════ */

/* ── Goodtimes Font ── */
@font-face {
  font-family: 'Goodtimes';
  src: url('assets/fonts/good-times.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── DARK MODE TOKENS (default) ──────────────── */
:root {
  --bg-base:        #0a0a0c;
  --bg-elevated:    #111113;
  --bg-card:        #161619;
  --bg-card-hover:  #1e1e22;
  --bg-frosted:     rgba(22, 22, 25, 0.75);

  --text-primary:   #eee9df;
  --text-heading:   #f5f0e8;
  --text-secondary: #b0b0be;
  --text-muted:     #78788a;
  --text-faint:     #6f6f82;

  --border:         rgba(200,192,176,0.1);
  --border-hover:   rgba(200,192,176,0.22);
  --border-strong:  rgba(200,192,176,0.35);

  --accent:         #c4a882;
  --accent-bright:  #e0c8a0;
  --accent-dim:     #8a7058;
  --accent-glow:    rgba(196, 168, 130, 0.15);
  --accent-glow-strong: rgba(196, 168, 130, 0.3);

  --navy:           #0f1d32;
  --navy-mid:       #182d4a;
  --brown-deep:     #2a1f14;

  --logo-filter:    brightness(0) invert(1);
  --card-glass:     rgba(255,255,255,0.03);
  --section-alt:    #0e0e10;
  --gradient-text:  linear-gradient(135deg, #f5f0e8 0%, #c4a882 100%);

  --font-sans:   'Inter', -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', monospace;

  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── LIGHT MODE TOKENS ───────────────────────── */
[data-theme="light"] {
  --bg-base:        #f8f5ef;
  --bg-elevated:    #f0ebe2;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f5f0e8;
  --bg-frosted:     rgba(255, 255, 255, 0.8);

  --text-primary:   #2a2a2f;
  --text-heading:   #1a1a1f;
  --text-secondary: #5a5a68;
  --text-muted:     #8a8a98;
  --text-faint:     #84848f;

  --border:         rgba(30, 30, 40, 0.08);
  --border-hover:   rgba(30, 30, 40, 0.15);
  --border-strong:  rgba(30, 30, 40, 0.25);

  --accent:         #9a7e5e;
  --accent-bright:  #b8956a;
  --accent-dim:     #7a6545;
  --accent-glow:    rgba(154, 126, 94, 0.1);
  --accent-glow-strong: rgba(154, 126, 94, 0.2);

  --logo-filter:    none;
  --card-glass:     rgba(0,0,0,0.02);
  --section-alt:    #efe9df;
  --gradient-text:  linear-gradient(135deg, #1a1a1f 0%, #9a7e5e 100%);
}

/* ── Transition for theme switch ───────────────
   Scoped to major surfaces only — a `body *` rule forces a
   style recalc on every element and janks the theme switch. */
body.theme-transitioning,
body.theme-transitioning .nav,
body.theme-transitioning section,
body.theme-transitioning .footer,
body.theme-transitioning .cap-item,
body.theme-transitioning .ind-card,
body.theme-transitioning .pillar,
body.theme-transitioning .princ,
body.theme-transitioning .wf-bubble,
body.theme-transitioning .deploy-infographic,
body.theme-transitioning .world-card,
body.theme-transitioning input,
body.theme-transitioning textarea,
body.theme-transitioning select,
body.theme-transitioning .btn-nova,
body.theme-transitioning .btn-outline,
body.theme-transitioning h1,
body.theme-transitioning h2,
body.theme-transitioning h3,
body.theme-transitioning p,
body.theme-transitioning a,
body.theme-transitioning span {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  /* body carries a gradient which propagates to the canvas, so this is
     belt-and-braces: it guarantees the root is never the browser default
     white if that gradient is ever slow to paint on a weak device. On a
     site this dark, one white frame reads as a broken page. */
  background: var(--bg-base);
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Native cursor is hidden only once JS confirms the custom cursor
   is running — if scripts fail, users keep a usable pointer. */
body.custom-cursor,
body.custom-cursor a,
body.custom-cursor button,
body.custom-cursor select {
  cursor: none;
}

/* Text entry keeps the native I-beam. A decorative ring cannot show where
   the caret will land, and precision matters more than consistency at the
   exact moment someone is trying to type their email address into the only
   form on the site. The ring still tracks alongside it. */
body.custom-cursor input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body.custom-cursor textarea,
body.custom-cursor [contenteditable] {
  cursor: text;
}

a { color: inherit; text-decoration: none; }
button { border: none; background: none; font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--navy-mid); color: var(--text-heading); }
[data-theme="light"] ::selection { background: rgba(154,126,94,0.2); color: #1a1a1f; }

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

/* ═══════════ CREATIVE CUSTOM CURSOR ═══════════ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  mix-blend-mode: difference;
  /* Positioned by transform, never left/top — writing left/top each frame
     forces a layout pass and is what made the cursor feel like it lagged. */
  will-change: transform;
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  position: absolute;
  top: -18px;
  left: -18px;
  /* Size changes are scale(), not width/height — compositor-only. */
  transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s, opacity 0.3s;
  opacity: 0.8;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Cursor states */
.cursor.hovering .cursor-ring {
  transform: scale(1.556); /* 36px → 56px */
  border-color: var(--accent-bright);
  background: rgba(196, 168, 130, 0.06);
}

.cursor.hovering .cursor-dot {
  transform: scale(0.6); /* 5px → 3px */
  opacity: 0.5;
}

.cursor.clicking .cursor-ring {
  transform: scale(0.778); /* 36px → 28px */
}

/* Cursor trail — subtle glow that follows with lag */
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  /* Centred with margins, not translate(-50%,-50%) — the transform belongs
     to the animation loop, so centring cannot live there too. */
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  will-change: transform;
}

.cursor-trail.active { opacity: 1; }

@media (hover: none) {
  .cursor, .cursor-trail { display: none !important; }
}

/* ═══════════ THEME TOGGLE ═══════════ */
.theme-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: all 0.35s var(--ease);
  margin-left: 0.5rem;
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.theme-icon {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  position: absolute;
  transition: all 0.4s var(--ease);
}

.theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

[data-theme="light"] .theme-icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

[data-theme="light"] .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ═══════════ PRELOADER ═══════════ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader.exit {
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  pointer-events: none;
}

.loader.hidden { display: none; }

.loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.loader-rings {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(196, 168, 130, 0);
  transform: scale(0.2);
  opacity: 0;
}

.loader-logo {
  opacity: 0;
  transform: scale(0.9);
}

/* Line-draw animation for loader logo */
.loader-draw-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  will-change: transform;
}

.draw-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  stroke-linecap: round;
  stroke-linejoin: round;
  will-change: stroke-dashoffset;
}

.draw-1 { animation: drawLine 1.15s cubic-bezier(0.32, 0.06, 0.24, 1) forwards 0.18s; }
.draw-2 { animation: drawLine 1.15s cubic-bezier(0.32, 0.06, 0.24, 1) forwards 0.46s; }
.draw-3 { animation: drawLine 1.15s cubic-bezier(0.32, 0.06, 0.24, 1) forwards 0.74s; }

@keyframes drawLine {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

.fill-face {
  opacity: 0;
  will-change: opacity;
}
.fill-1 { animation: fillFade 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.58s; }
.fill-2 { animation: fillFade 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.76s; }
.fill-3 { animation: fillFade 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.94s; }

@keyframes fillFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.loader-logo-text {
  font-family: 'Goodtimes', sans-serif;
  font-size: 2.2rem;
  letter-spacing: 0.15em;
  color: var(--text-heading);
  opacity: 0;
  will-change: opacity, transform;
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.6s;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.loader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader-tagline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
}

.tagline-word {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tagline-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.loader-progress {
  width: 180px;
  height: 1px;
  background: var(--border);
  overflow: hidden;
  opacity: 0;
}

.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width 0.1s linear;
}

/* ═══════════ THREE.JS BACKGROUND ═══════════ */
.nova-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.8s;
}

[data-theme="light"] .nova-bg { opacity: 0.25; }

.nova-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════ NAVIGATION ═══════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition: all 0.6s var(--ease);
  opacity: 0;
  transform: translateY(-20px);
}

.nav.visible {
  opacity: 1;
  transform: translateY(0);
}

.nav.scrolled {
  background: var(--bg-frosted);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-icon-svg {
  height: 22px;
  width: auto;
}

.nav-logo-text {
  font-family: 'Goodtimes', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--text-heading);
  transition: opacity 0.3s;
}

.nav-logo:hover .nav-logo-text { opacity: 0.7; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.3s;
  position: relative;
}

.nav-links a:not(.nav-cta):not(.theme-toggle)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}

.nav-links a:not(.nav-cta):hover { color: var(--text-heading); }
.nav-links a:not(.nav-cta):not(.theme-toggle):hover::after { width: 100%; }

.nav-cta {
  padding: 0.5rem 1.3rem;
  border: 1px solid var(--accent);
  color: var(--accent) !important;
  transition: all 0.35s var(--ease) !important;
  background: transparent;
}

.nav-cta:hover {
  background: var(--accent) !important;
  color: var(--bg-base) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 101;
}

.nav-toggle span {
  width: 24px;
  height: 1.5px;
  background: var(--text-heading);
  transition: all 0.3s var(--ease);
  transform-origin: center;
}

.nav-toggle.active span:first-child { transform: rotate(45deg) translate(2.5px, 2.5px); }
.nav-toggle.active span:last-child { transform: rotate(-45deg) translate(2.5px, -2.5px); }

/* Mobile menu — File Tree */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.mobile-menu.open { opacity: 1; pointer-events: all; }

/* File Tree Component */
.file-tree {
  width: min(340px, 90vw);
  background: #1e1e2e;
  border: 1px solid rgba(200,192,176,0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.open .file-tree {
  transform: translateY(0) scale(1);
}

.ft-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #181825;
  border-bottom: 1px solid rgba(200,192,176,0.08);
}

.ft-dots {
  display: flex;
  gap: 6px;
}

.ft-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ft-dot-red { background: #ff5f57; }
.ft-dot-yellow { background: #febc2e; }
.ft-dot-green { background: #28c840; }

.ft-title {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200,192,176,0.5);
}

.ft-body {
  padding: 0.5rem 0;
  max-height: 60vh;
  overflow-y: auto;
}

/* Tree rows */
.ft-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  position: relative;
}

.ft-row:hover {
  background: rgba(200,192,176,0.06);
}

.ft-row:hover .ft-name {
  /* The file tree is a fixed dark surface (#1e1e2e) in both themes,
     so hover text must stay light — var(--text-heading) is near-black
     in light mode and made rows vanish on hover. */
  color: #f5f0e8;
}

.ft-row:hover::after {
  content: '';
  position: absolute;
  right: 1rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

.ft-row-muted {
  cursor: default;
  opacity: 0.4;
}
.ft-row-muted:hover { background: transparent; }
.ft-row-muted:hover::after { display: none; }

/* Chevron */
.ft-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(200,192,176,0.4);
  transition: transform 0.2s var(--ease);
}

.ft-open > .ft-row > .ft-chevron {
  transform: rotate(90deg);
}

/* Folder icon */
.ft-icon-folder {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.8;
}

/* File dot (color-coded) */
.ft-file-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ft-color, rgba(200,192,176,0.4));
  margin-left: 3px;
  margin-right: 2px;
  transition: transform 0.2s;
}

.ft-row:hover .ft-file-dot {
  transform: scale(1.3);
}

/* File/folder name */
.ft-name {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.82rem;
  color: rgba(200,192,176,0.7);
  transition: color 0.15s;
  white-space: nowrap;
}

.ft-row-folder .ft-name {
  color: rgba(200,192,176,0.9);
  font-weight: 500;
}

/* Children container — collapse/expand */
.ft-children {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.25s ease-out, opacity 0.2s;
  opacity: 1;
}

.ft-folder:not(.ft-open) > .ft-children {
  max-height: 0;
  opacity: 0;
}

/* Vertical connector lines */
.ft-folder > .ft-children {
  position: relative;
}

.ft-folder > .ft-children::before {
  content: '';
  position: absolute;
  left: 1.65rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(200,192,176,0.08);
  transition: background 0.2s;
}

.ft-folder:hover > .ft-children::before {
  background: rgba(200,192,176,0.15);
}

/* Nested depth connector */
.ft-folder .ft-folder > .ft-children::before {
  left: 2.9rem;
}

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  z-index: 1;
}

.hero-content {
  max-width: 900px;
  position: relative;
}

.hero-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  opacity: 0;
}

.hero-icon-svg {
  height: clamp(40px, 5vw, 60px);
  width: auto;
  margin-bottom: 0.5rem;
}

.hero-logo-text {
  font-family: 'Goodtimes', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: 0.12em;
  color: var(--text-heading);
}

.hero-suffix {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-divider {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  opacity: 0;
}

.divider-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ── Gradient headline text ── */
.hero-headline {
  font-family: var(--font-sans);
  font-weight: 200;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.h-line {
  display: block;
  overflow: hidden;
}

.h-word {
  display: inline-block;
  font-size: clamp(3rem, 7vw, 6rem);
  opacity: 0;
  transform: translateY(100%);
  color: var(--text-heading);
}

.h-indent { padding-left: clamp(1rem, 3vw, 3rem); }

.h-muted {
  color: var(--text-muted);
  margin-left: 0.3em;
}

/* Gradient accent text — the creative detail */
.h-accent {
  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 50%, var(--accent-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  position: relative;
}

.hero-sub {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.9;
  opacity: 0;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
  opacity: 0;
}

/* ── Nova Button — signature CTA with glow ── */
.btn-nova {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.4rem;
  background: var(--accent);
  color: var(--bg-base);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.btn-nova:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px var(--accent-glow-strong);
}

.btn-nova-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}

.btn-nova:hover .btn-nova-glow { opacity: 1; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 2.4rem;
  border: 1px solid var(--border-strong);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: all 0.35s var(--ease);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Hero metrics with glass background ── */
.hero-metrics {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  opacity: 0;
  background: var(--card-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  padding: 1.5rem 2.5rem;
  border-radius: 2px;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.metric-val {
  font-weight: 200;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--text-heading);
}

.metric-suffix {
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 300;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric-sep {
  width: 1px;
  height: 36px;
  background: var(--border);
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
}

.scroll-orbit {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(196, 168, 130, 0.3);
  border-radius: 50%;
  position: relative;
  animation: orbitPulse 2.5s ease-in-out infinite;
}

.scroll-dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollDot 2.5s ease-in-out infinite;
}

@keyframes orbitPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes scrollDot {
  0% { top: 4px; opacity: 1; }
  100% { top: 18px; opacity: 0; }
}

.scroll-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ═══════════ SECTION UTILITIES ═══════════ */
.section {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
  z-index: 1;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.label-line {
  width: 40px;
  height: 1px;
  background: var(--accent);
}

.label-text {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Gradient section headings ── */
.section-heading {
  font-weight: 200;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
}

/* ═══════════ ABOUT ═══════════ */
.about {
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}

.about-intro {
  max-width: 800px;
  margin-bottom: 4rem;
}

.about-statement {
  font-weight: 200;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.45;
  color: var(--text-heading);
}

.about-statement em {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.about-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.about-body p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.9;
}

.about-body em {
  color: var(--text-heading);
  font-style: italic;
}

/* ── Pillar cards with glass effect ── */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.pillar {
  background: var(--bg-base);
  padding: 2.5rem 2rem;
  transition: all 0.5s var(--ease);
  position: relative;
  overflow: hidden;
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.pillar:hover { background: var(--bg-elevated); }
.pillar:hover::before { opacity: 1; }

.pillar-icon {
  width: 40px;
  height: 40px;
  color: var(--accent);
  margin-bottom: 1.25rem;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.4s var(--ease);
}

.pillar:hover .pillar-icon { opacity: 1; transform: translateY(-2px); }
.pillar-icon svg { width: 100%; height: 100%; }

.pillar h4 {
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-heading);
}

.pillar p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ═══════════ CAPABILITIES — ACCORDION ═══════════ */
.capabilities {
  border-top: 1px solid var(--border);
  background: var(--section-alt);
}

.cap-accordion {
  border-top: 1px solid var(--border);
}

.cap-item {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.cap-header {
  display: grid;
  grid-template-columns: 50px 1fr 40px;
  align-items: center;
  padding: 1.75rem 0;
  transition: color 0.3s;
}

.cap-header:hover { color: var(--accent); }

.cap-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.cap-title {
  font-weight: 300;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.cap-toggle {
  position: relative;
  width: 20px;
  height: 20px;
  justify-self: end;
}

.cap-toggle span {
  position: absolute;
  background: var(--text-muted);
  transition: all 0.4s var(--ease);
}

.cap-toggle span:first-child {
  width: 20px; height: 1px;
  top: 50%; left: 0;
  transform: translateY(-50%);
}

.cap-toggle span:last-child {
  width: 1px; height: 20px;
  left: 50%; top: 0;
  transform: translateX(-50%);
}

.cap-item.open .cap-toggle span:last-child {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.cap-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease), padding 0.6s var(--ease);
  padding: 0 0 0 50px;
}

/* Open height is set per-item by JS (scrollHeight) so long
   content never clips at narrow widths. */
.cap-item.open .cap-body {
  padding-bottom: 2rem;
}

.cap-body p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 600px;
  margin-bottom: 1.25rem;
}

.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cap-tags button {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.3s;
  background: var(--card-glass);
}

.cap-tags button {
  cursor: pointer;
  position: relative;
}

.cap-tags button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
  transform: translateY(-1px);
}

.cap-tags button:active {
  transform: scale(0.97);
}

/* Capability Insight Card (floating) */
.cap-insight-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,6,8,0.7);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.cap-insight-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
[data-theme="light"] .cap-insight-overlay {
  background: rgba(200,195,185,0.6);
}

.cap-insight-card {
  max-width: 520px;
  width: 90%;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  padding: 2.5rem;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
.cap-insight-overlay.open .cap-insight-card {
  transform: translateY(0) scale(1);
}

.cap-insight-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: all 0.3s;
}
.cap-insight-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(90deg);
}

.cap-insight-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.cap-insight-title {
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--text-heading);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.cap-insight-body {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.cap-insight-body p {
  margin-bottom: 0.75rem;
}

.cap-insight-body p:last-child {
  margin-bottom: 0;
}

/* ═══════════ WORKFLOW DIAGRAM ═══════════ */
.workflow-section {
  border-top: 1px solid var(--border);
  padding: 6rem 0;
}

.workflow-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2rem 0;
  margin-top: 2rem;
}

.wf-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  position: relative;
  min-width: 110px;
}

.wf-bubble {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  box-shadow:
    0 4px 0 var(--bg-card-hover),
    0 6px 20px rgba(0,0,0,0.2);
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  z-index: 2;
}

.wf-bubble svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  transition: color 0.3s;
}

.wf-bubble.pressing {
  transform: translateY(4px);
  box-shadow:
    0 0 0 var(--bg-card-hover),
    0 2px 8px rgba(0,0,0,0.15);
  border-color: var(--accent);
  background: var(--accent-glow);
}
.wf-bubble.pressing svg { color: var(--accent); }

.wf-bubble::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1.5px solid var(--accent);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.wf-bubble.pressing::before { opacity: 0.5; transform: scale(1); }

.wf-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s;
  text-align: center;
}
.wf-bubble.pressing ~ .wf-label { color: var(--accent); }

.wf-connector {
  width: 44px;
  height: 2px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}
.wf-connector::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.wf-connector.active::after { width: 100%; }

@media (max-width: 768px) {
  .workflow-track {
    flex-direction: column;
    gap: 0;
  }
  .wf-connector {
    width: 2px;
    height: 28px;
  }
  .wf-connector::after {
    width: 100%;
    height: 0%;
    transition: height 0.5s cubic-bezier(0.16,1,0.3,1);
  }
  .wf-connector.active::after { height: 100%; width: 100%; }
}

/* ═══════════ PROCESS ═══════════ */
.process {
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}

.process-stages {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-top: 2rem;
}

.stage {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 3rem;
  align-items: start;
}

.stage-visual { display: flex; justify-content: center; }

.stage-ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.stage-ring svg { width: 100%; height: 100%; }

.stage-progress {
  transition: stroke-dashoffset 1.2s var(--ease);
  transform-origin: center;
  transform: rotate(-90deg);
}

.stage.in-view .stage-progress { stroke-dashoffset: 0 !important; }

.stage-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 200;
  color: var(--accent);
}

.stage-content h3 {
  font-weight: 200;
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--text-heading);
}

.stage-content p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 1.25rem;
}

.stage-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stage-outputs span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--card-glass);
  transition: all 0.3s;
}

.stage-outputs span:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════ BIG QUOTE ═══════════ */
.quote-section {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: clamp(6rem, 12vw, 10rem) 0;
  background: var(--section-alt);
}

.big-quote {
  font-weight: 200;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto 2.5rem;
  font-style: italic;
  color: var(--text-heading);
}

.quote-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.author-line {
  width: 30px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 0.5rem;
}

.author-name {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-heading);
}

.author-role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ═══════════ INDUSTRIES ═══════════ */
.industries {
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}

[data-theme="dark"] .industries {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--navy) 50%, var(--bg-base) 100%);
}

.industry-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.ind-card {
  position: relative;
  /* Was `backdrop-filter: blur(10px)`. Six of these on screen at ~66,000px²
     each meant ~400,000px² of live blur, re-composited whenever anything
     beneath them moved. On a near-black ground the blur was doing almost no
     visible work, so a slightly denser fill reads the same for free. */
  background: linear-gradient(180deg, rgba(28, 27, 33, 0.92), rgba(18, 18, 22, 0.92));
  padding: 2.5rem 2rem;
  overflow: hidden;
  /* `all` transitioned layout properties too — name what actually changes. */
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
              background 0.4s var(--ease);
}

.ind-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

.ind-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  top: -60px;
  right: -60px;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.ind-card:hover .ind-glow { opacity: 1; }

.ind-card h4 {
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-heading);
}

.ind-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ═══════════ DEPLOYMENT INFOGRAPHIC ═══════════ */
.deploy-infographic {
  margin-top: 4rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 2rem 2.5rem;
  position: relative;
  overflow: hidden;
}

.deploy-infographic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196,168,130,0.02) 0%, transparent 50%);
  pointer-events: none;
}

.deploy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.deploy-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.deploy-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.deploy-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: deployPulse 1.5s ease infinite;
}

@keyframes deployPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(196,168,130,0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(196,168,130,0); }
}

.deploy-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.deploy-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  opacity: 0.35;
  transition: opacity 0.5s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.deploy-stage.active {
  opacity: 1;
}

.deploy-stage.active .deploy-icon {
  border-color: var(--accent);
  background: rgba(196,168,130,0.08);
  box-shadow: 0 0 20px rgba(196,168,130,0.15);
  transform: translateY(-2px);
}

.deploy-stage.active .deploy-icon svg {
  color: var(--accent);
}

.deploy-stage.done {
  opacity: 0.7;
}

.deploy-stage.done .deploy-icon {
  border-color: rgba(196,168,130,0.3);
  background: rgba(196,168,130,0.04);
}

.deploy-stage.done .deploy-icon svg {
  color: rgba(196,168,130,0.5);
}

.deploy-icon {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  background: transparent;
}

.deploy-icon svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: color 0.3s;
}

.deploy-name {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s;
}

.deploy-stage.active .deploy-name {
  color: var(--accent);
}

.deploy-detail {
  font-size: 0.6875rem;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.3s;
}

.deploy-stage.active .deploy-detail {
  opacity: 0.7;
  transform: translateY(0);
}

.deploy-line {
  flex: 0 0 auto;
  width: 30px;
  height: 2px;
  background: var(--border);
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.deploy-line-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}

.deploy-line.active .deploy-line-fill {
  width: 100%;
}

@media (max-width: 768px) {
  .deploy-infographic { padding: 1.5rem; }
  .deploy-track {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .deploy-stage { flex-direction: row; gap: 0.75rem; }
  .deploy-line {
    width: 2px;
    height: 20px;
    margin-top: 0;
    margin-left: 24px;
  }
  .deploy-line-fill {
    width: 100%;
    height: 0%;
    transition: height 0.6s cubic-bezier(0.16,1,0.3,1);
  }
  .deploy-line.active .deploy-line-fill { height: 100%; }
}

/* ═══════════ PRINCIPLES ═══════════ */
.principles {
  border-top: 1px solid var(--border);
  background: var(--section-alt);
}

.principles-list {
  display: flex;
  flex-direction: column;
}

.princ {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.3s;
}

.princ:hover { border-color: var(--border-hover); }

.princ-num {
  font-size: 1.1rem;
  font-weight: 200;
  color: var(--accent);
  opacity: 0.6;
}

.princ-content h4 {
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
  color: var(--text-heading);
}

.princ-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 500px;
}

/* ═══════════ VISION CTA ═══════════ */
.vision-cta {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, var(--accent-glow) 0%, transparent 70%),
    var(--bg-base);
}

.vision-cta-inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.vision-cta-inner .section-label { justify-content: center; }

.vision-cta-heading {
  font-weight: 200;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.3;
  margin-bottom: 1rem;
  color: var(--text-heading);
}

.vision-cta-heading em {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.vision-cta-sub {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.btn-vision { padding: 1rem 3rem; font-size: 0.82rem; }

/* ═══════════ CONTACT ═══════════ */
.contact {
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contact-heading {
  font-weight: 200;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.35;
  margin-bottom: 1.25rem;
  color: var(--text-heading);
}

.contact-sub {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 400px;
  margin-bottom: 2.5rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.info-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-value {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

a.info-value:hover { color: var(--accent); }

/* ── Form with glass cards ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--card-glass);
  border: 1px solid var(--border);
  padding: 2rem;
  backdrop-filter: blur(8px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-field label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-field input,
.form-field textarea,
.form-field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
  font-size: 0.9rem;
  color: var(--text-heading);
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
  -webkit-appearance: none;
  resize: none;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--accent);
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2378788a' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.form-field select option { background: var(--bg-card); color: var(--text-heading); }

.btn-submit { width: 100%; }

/* ═══════════ FOOTER ═══════════ */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 4rem 0 2.5rem;
  background: var(--bg-base);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-logo-mark {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.footer-icon-svg {
  height: 18px;
  width: auto;
}

.footer-logo-text {
  font-family: 'Goodtimes', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-heading);
}

.footer-tagline {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.footer-nav {
  display: flex;
  gap: 3.5rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.footer-col a {
  font-size: 0.82rem;
  color: var(--text-secondary);
  transition: color 0.3s;
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a { color: var(--text-muted); transition: color 0.3s; }
.footer-legal a:hover { color: var(--text-secondary); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .industry-mosaic { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
  body { cursor: auto; }
  .cursor, .cursor-trail { display: none !important; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .section { padding: 3rem 0; }
  .section-label { margin-bottom: 1rem; }
  .section-heading { margin-bottom: 0.75rem; }
  .about-intro { margin-bottom: 2.5rem; }
  .about-statement { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .about-body { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-pillars { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; gap: 1.5rem; }
  .stage-visual { justify-content: flex-start; }
  .industry-mosaic { grid-template-columns: 1fr; gap: 0.5rem; }
  .ind-card { padding: 1.5rem 1.25rem; }
  .princ { grid-template-columns: 40px 1fr; gap: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  .hero-metrics {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
  }
  .metric-sep { width: 30px; height: 1px; }

  .cap-header { grid-template-columns: 40px 1fr 30px; }
  .cap-body { padding-left: 40px; }

  /* Mobile card fixes — opaque backgrounds with visible contrast */
  .about-pillars {
    background: var(--bg-base);
    gap: 1px;
  }
  .pillar {
    background: #1a1a1f;
    padding: 1.5rem 1.25rem;
    border: 1px solid rgba(200,192,176,0.12);
    border-radius: 4px;
    margin-bottom: 0.5rem;
  }
  .industries,
  [data-theme="dark"] .industries {
    background: var(--bg-base) !important;
  }
  .industry-mosaic {
    background: var(--bg-base);
    gap: 0.5rem;
  }
  .ind-card {
    background: #1a1a1f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 1.25rem 1.25rem;
    border: 1px solid rgba(200,192,176,0.12);
    border-radius: 4px;
  }

  /* Reduce Three.js on mobile — subtle texture only */
  .nova-bg {
    opacity: 0.15 !important;
  }
}

@media (max-width: 480px) {
  .hero-scroll-cue { display: none; }
}

/* ═══════════ BACK TO TOP ═══════════ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, background 0.3s, border-color 0.3s;
  z-index: 100;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-base);
}

/* ═══════════ ACCESSIBILITY ═══════════ */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 20000;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--bg-base);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: top 0.3s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── No-GSAP fallback ──
   If the CDN scripts fail, .no-motion is set on <html>: the loader is
   skipped and every animation-hidden element renders in its final state. */
.no-motion .loader { display: none !important; }
.no-motion .nav { opacity: 1 !important; transform: none !important; }
.no-motion .hero-logo-wrap,
.no-motion .hero-divider,
.no-motion .h-word,
.no-motion .hero-sub,
.no-motion .hero-ctas,
.no-motion .hero-metrics,
.no-motion .hero-scroll-cue {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .hero-scroll-cue { display: none; }
}

/* ═══════════ WORLDS SHOWCASE ═══════════ */
.worlds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

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

.world-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}

.world-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px var(--accent-glow);
}

.world-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b0b0e;
}

.world-stage.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  aspect-ratio: auto;
}

.world-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: worldKenBurns 22s ease-in-out infinite alternate;
}

@keyframes worldKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(1.5%, -1.5%); }
}

/* Gold shimmer sweep over the idle poster */
.world-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%,
              rgba(196,168,130,0.12) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: worldShimmer 6s var(--ease-smooth) infinite;
  pointer-events: none;
}

.world-stage.active::after { display: none; }
.world-stage.active .world-poster { display: none; }

@keyframes worldShimmer {
  0%   { background-position: 120% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

.world-activate {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg-base);
  background: var(--accent);
  border: 1px solid var(--accent);
  transition: all 0.35s var(--ease);
  animation: worldPulse 2.8s ease-in-out infinite;
}

.world-activate:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  transform: translateX(-50%) translateY(-2px);
}

@keyframes worldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,168,130,0.45); }
  55%      { box-shadow: 0 0 0 14px rgba(196,168,130,0); }
}

.world-stage.active .world-activate { display: none; }

.world-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Loading bar while the GLB streams in */
.world-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(10,10,12,0.72);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d8cfc0;
}

.world-loading-bar {
  width: 180px;
  height: 2px;
  background: rgba(196,168,130,0.18);
  overflow: hidden;
}

.world-loading-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c4a882, #e0c8a0);
  transition: width 0.2s linear;
}

/* HUD: flight preset pills + controls (dark chrome in both themes) */
.world-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.world-flights {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  pointer-events: auto;
}

.world-flight-btn {
  padding: 0.45rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #d8cfc0;
  background: rgba(12,12,16,0.72);
  border: 1px solid rgba(196,168,130,0.35);
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease);
}

.world-flight-btn:hover,
.world-flight-btn.playing {
  color: #0a0a0c;
  background: #c4a882;
  border-color: #c4a882;
}

.world-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  pointer-events: auto;
}

.world-ctrl-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8cfc0;
  background: rgba(12,12,16,0.72);
  border: 1px solid rgba(196,168,130,0.35);
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease);
}

.world-ctrl-btn:hover {
  color: #0a0a0c;
  background: #c4a882;
  border-color: #c4a882;
}

.world-ctrl-btn svg { width: 16px; height: 16px; }

.world-hint {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(216,207,192,0.75);
  background: rgba(12,12,16,0.6);
  border: 1px solid rgba(196,168,130,0.2);
  backdrop-filter: blur(8px);
  opacity: 1;
  transition: opacity 0.6s;
  pointer-events: none;
}

.world-hint.faded { opacity: 0; }

/* Hotspot labels projected from 3D space */
.world-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e8e0d2;
  background: rgba(12,12,16,0.78);
  border: 1px solid rgba(196,168,130,0.4);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  transition: background 0.3s, border-color 0.3s;
}

.world-hotspot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4a882;
  box-shadow: 0 0 8px rgba(196,168,130,0.9);
  animation: hotspotGlow 2.2s ease-in-out infinite;
}

@keyframes hotspotGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(196,168,130,0.5); }
  50%      { box-shadow: 0 0 12px rgba(196,168,130,1); }
}

.world-hotspot:hover {
  background: rgba(30,26,20,0.92);
  border-color: #c4a882;
}

.world-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 4rem;
  max-width: 420px;
  padding: 1rem 1.25rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #e8e0d2;
  background: rgba(12,12,16,0.85);
  border: 1px solid rgba(196,168,130,0.35);
  border-left: 2px solid #c4a882;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

.world-caption.show {
  opacity: 1;
  transform: translateY(0);
}

.world-caption strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c4a882;
  margin-bottom: 0.35rem;
}

.world-meta {
  padding: 1.5rem 1.75rem 1.75rem;
}

.world-name {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-heading);
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}

.world-role {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.world-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.world-tags span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--card-glass);
}

@media (prefers-reduced-motion: reduce) {
  .world-poster { animation: none; }
  .world-stage::after { animation: none; display: none; }
  .world-activate { animation: none; }
}

/* ═══════════ NAV RIGHT GROUP ═══════════ */
.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 768px) {
  .nav-right { gap: 1rem; }
}

/* ═══════════ FORM STATUS ═══════════ */
.form-status {
  display: block;
  min-height: 1.2rem;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.form-status.error { color: #c25555; }
.form-status.success { color: var(--accent); }

.form-fallback {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.form-fallback a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-glow-strong);
}

.honeypot-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══════════ EXAMPLE BUILDS (portfolio) ═══════════ */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
@media (max-width: 1024px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } }
.work-card {
  background: var(--bg-card); border: 1px solid var(--border); overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  cursor: default;
}
.work-card:hover, .work-card:focus-visible {
  transform: translateY(-4px); border-color: var(--border-hover);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px var(--accent-glow);
}
.work-frame { background: #101014; border-bottom: 1px solid var(--border); }
.wf-bar { display: flex; gap: 5px; padding: 8px 10px; }
.wf-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(200,192,176,0.18); }
.work-card:hover .wf-bar i:nth-child(1) { background: #ff5f57; }
.work-card:hover .wf-bar i:nth-child(2) { background: #febc2e; }
.work-card:hover .wf-bar i:nth-child(3) { background: #28c840; }
.wm { height: 150px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; position: relative; overflow: hidden; }
.wm .wm-hero { height: 44px; border-radius: 5px; background: linear-gradient(120deg, rgba(196,168,130,0.22), rgba(24,45,74,0.4)); }
.wm .wm-row { display: flex; gap: 7px; flex: 1; }
.wm .wm-row span { flex: 1; border-radius: 4px; background: rgba(200,192,176,0.08);
  transition: background 0.5s var(--ease); }
.work-card:hover .wm-row span { background: rgba(196,168,130,0.16); }
.wm-saas { flex-direction: row; gap: 8px; }
.wm-side { width: 34px; border-radius: 5px; background: rgba(200,192,176,0.08); }
.wm-main { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wm-kpis { display: flex; gap: 7px; }
.wm-kpis b { flex: 1; height: 22px; border-radius: 4px; background: rgba(196,168,130,0.14); }
.wm-chart { flex: 1; display: flex; align-items: flex-end; gap: 5px; padding: 4px 2px; }
.wm-chart u { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), rgba(196,168,130,0.35));
  transform: scaleY(0.6); transform-origin: bottom; transition: transform 0.6s var(--ease); }
.work-card:hover .wm-chart u { transform: scaleY(1); }
.wm-hero-split { display: flex; gap: 7px; }
.wm-hero-split em { flex: 1.4; border-radius: 5px; background: linear-gradient(120deg, rgba(196,168,130,0.25), rgba(42,31,20,0.5)); }
.wm-hero-split s { flex: 1; border-radius: 5px; background: rgba(200,192,176,0.08); }
.wm-form { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wm-form span { height: 14px; border-radius: 4px; background: rgba(200,192,176,0.08); }
.wm-form b { height: 20px; width: 46%; border-radius: 4px; background: var(--accent); opacity: 0.75;
  transition: width 0.5s var(--ease); }
.work-card:hover .wm-form b { width: 60%; }
.wm-hero-glow { position: relative; }
.wm-hero-glow::after { content: ''; position: absolute; inset: 0; border-radius: 5px;
  background: radial-gradient(60px 24px at 50% 55%, rgba(224,200,160,0.5), transparent 70%); }
.wm-feat { display: flex; gap: 7px; flex: 1; }
.wm-feat span:first-child { flex: 0.5; border-radius: 4px; background: rgba(196,168,130,0.16); }
.wm-feat span:last-child { flex: 1.5; border-radius: 4px; background: rgba(200,192,176,0.07); }
.wm-app { flex-direction: row; gap: 8px; }
.wm-list { width: 40%; display: flex; flex-direction: column; gap: 6px; }
.wm-list span { flex: 1; border-radius: 4px; background: rgba(200,192,176,0.08); }
.wm-list span:first-child { background: rgba(196,168,130,0.2); }
.wm-detail { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wm-detail span { height: 12px; border-radius: 4px; background: rgba(200,192,176,0.08); }
.wm-detail span:last-child { width: 70%; }
.wm-ai { justify-content: center; }
.wm-chat { display: flex; flex-direction: column; gap: 8px; }
.wm-chat span { height: 16px; border-radius: 8px; background: rgba(200,192,176,0.09); }
.wm-chat .l { width: 62%; align-self: flex-start; }
.wm-chat .r { width: 48%; align-self: flex-end; background: rgba(196,168,130,0.22); }
.wm-pulse { position: absolute; right: 14px; bottom: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,200,160,0.9), rgba(196,168,130,0.15) 60%, transparent 75%); }
.work-card:hover .wm-pulse { animation: workPulse 1.6s ease-in-out infinite; }
@keyframes workPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.work-meta { padding: 1.2rem 1.4rem 1.4rem; }
.work-tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.work-meta h3 { font-size: 1.02rem; font-weight: 400; color: var(--text-heading); margin: 0.35rem 0 0.4rem; }
.work-meta p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════════════════
   OWNER REFERENCE FRAMES — August 2026
   Motion in this layer is compositor-only: transform and opacity.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --gold-hot: #f4e4c4;
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-specular: rgba(255, 255, 255, 0.055);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-smooth: cubic-bezier(0.77, 0, 0.175, 1);
  --particle-x: 34px;
  --particle-y: -12px;
  --particle-scale: 1;
}

/* The supplied visual language is intentionally dark-only. */
[data-theme="light"] {
  --bg-base: #0a0a0c;
  --bg-elevated: #111113;
  --bg-card: #161619;
  --bg-card-hover: #1e1e22;
  --bg-frosted: rgba(22, 22, 25, 0.94);
  --text-primary: #eee9df;
  --text-heading: #f5f0e8;
  --text-secondary: #b0b0be;
  --text-muted: #858594;
  --text-faint: #707080;
  --border: rgba(200, 192, 176, 0.1);
  --border-hover: rgba(200, 192, 176, 0.22);
  --border-strong: rgba(200, 192, 176, 0.35);
  --accent: #c4a882;
  --accent-bright: #e0c8a0;
  --accent-dim: #8a7058;
  --accent-glow: rgba(196, 168, 130, 0.15);
  --accent-glow-strong: rgba(196, 168, 130, 0.3);
  --logo-filter: brightness(0) invert(1);
  --card-glass: rgba(255, 255, 255, 0.03);
  --section-alt: #0e0e10;
  --gradient-text: linear-gradient(135deg, #f5f0e8 0%, #c4a882 100%);
}

.theme-toggle { display: none; }
body { background: linear-gradient(180deg, #0a0a0c 0%, #101014 48%, #0a0a0c 100%); }
html { scroll-behavior: auto; }
.capabilities, .industries, .process, .quote-section, .contact, .work { background: transparent; }

/* Universal input and press feedback. */
:where(a, button, [role="button"], .work-card, .ind-card) {
  touch-action: manipulation;
  transition-property: transform, opacity;
  transition-duration: 140ms;
  transition-timing-function: var(--ease);
}
:where(a, button, [role="button"], .work-card, .ind-card):active {
  transform: scale(0.97) !important;
  transition-duration: 120ms !important;
}
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--gold-hot);
  outline-offset: 4px;
}

/* ── Loader composition ──
   Logo dead centre. The concentric rings are TRUE CIRCLES — equal width and
   height, equal insets on all four sides — sitting off to one side of the
   viewport so the composition is asymmetric without the logo moving.
   They were previously a 460x260 rotated ellipse with the whole content
   block shoved 8vw right, which squashed the circles and knocked the logo
   off centre at the same time. */
.loader { background: #0a0a0c; }
.loader.exit { transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1); }
.loader-content { transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1), opacity 620ms ease-out; }
.loader.exit .loader-content { transform: translateY(-18px) scale(0.985); opacity: 0; }

/* Centred. Nothing shifts the logo off the middle of the screen. */
.loader-content { transform: none; }

.loader-rings {
  /* The ORIGIN sits off-screen, past the top-left corner. Circles grow from
     a point you never see, so what sweeps across the viewport is only their
     lower-right arc — the shape reads as something vast passing behind the
     page rather than a target centred on it.
     Sized in vmax so the arcs still cross the full screen at any aspect. */
  position: fixed;
  /* Radius has to stay near viewport scale. At 190vmax the arcs were so
     large they crossed the screen as near-straight diagonals — the
     curvature, and therefore the "concentric circles" read, was lost.
     At 105vh the radius is roughly two thirds of the screen height, which
     keeps the curve obvious and lets several rings nest in view at once. */
  width: 105vh;
  height: 105vh;              /* equal to width — perfect circles */
  top: -14vh;                 /* the centre point, just off-screen */
  left: -9vw;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Every ring occupies the full box and GROWS outward from a point, rather
   than sitting at a fixed inset. Staggering the same 3.4s loop by 680ms
   means a new circle is always emerging from the centre while the previous
   one is still widening — a continuous ripple instead of a single bloom.
   Only transform and opacity animate, so this stays on the compositor. */
.ring {
  inset: 0;
  border-radius: 50%;
  /* Deliberately quiet. These are atmosphere behind the logo, not the
     subject — at 0.55 they competed with the wordmark for attention. */
  border-color: rgba(232, 210, 172, 0.30);
  transform: scale(0.06);
  opacity: 0;
  will-change: transform, opacity;
  /* Slower sweep: a 5.2s cycle drifts rather than rushes, which reads as
     calm and gives the eye time to register the concentric structure. */
  animation: ringGrow 5.2s cubic-bezier(0.25, 0.55, 0.35, 1) infinite;
}

.ring-1 { animation-delay: 0s; }
.ring-2 { animation-delay: 1.04s; }
.ring-3 { animation-delay: 2.08s; }
.ring-4 { animation-delay: 3.12s; }
.ring-5 { animation-delay: 4.16s; }

/* Tuned for the off-screen origin. At 0.3 the arc is nosing in near the
   top-left; by 2.6 it has swept past the bottom-right corner and gone.
   The wide range is what makes several rings visible at once, each at a
   different point in the sweep. */
@keyframes ringGrow {
  0%   { transform: scale(0.30); opacity: 0; }
  18%  {                         opacity: 0.34; }   /* peak is low on purpose */
  72%  {                         opacity: 0.20; }
  100% { transform: scale(2.60); opacity: 0; }      /* sweep out and dissolve */
}

/* The loader is leaving — stop spawning new rings so the exit is clean. */
.loader.exit .ring { animation-play-state: paused; }

/* The logo sits above the rings and is animated by GSAP, so it must not
   carry a competing transform here. */
.loader-logo { position: relative; z-index: 1; }
.loader-logo-text { animation: ignitionLabel 260ms var(--ease) 320ms forwards; }

@media (max-width: 820px) {
  /* Keep the origin off-screen on mobile too, just pulled in tighter so the
     arcs still curve visibly across a narrow viewport instead of reading as
     near-straight lines. */
  .loader-rings { width: 128vh; height: 128vh; top: -10vh; left: -12vw; }
}
.loader-bar {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms linear;
}




















@keyframes ignitionLabel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Frame 12: serif hero, dispersing particles, paired pills and figures. */
.hero { min-height: 100svh; isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  inset: 12% 8% 10% 42%;
  background: radial-gradient(ellipse, rgba(196,168,130,0.12), transparent 66%);
  opacity: 0.8;
  z-index: -1;
}
.hero-content { position: relative; z-index: 2; width: 100%; min-width: 0; }
.hero-logo-wrap { flex-direction: row; justify-content: center; gap: .55rem; margin-bottom: 1.25rem; }
.hero-logo-wrap .hero-icon-svg { width: 18px; height: 18px; margin: 0; }
.hero-logo-wrap .hero-logo-text { font-size: .78rem; letter-spacing: .16em; }
.hero-logo-wrap .hero-suffix { font-size: 0.6875rem; letter-spacing: .24em; }
.hero-logo-wrap, .hero-divider, .h-word, .hero-sub, .hero-ctas, .hero-metrics, .hero-scroll-cue { opacity: 1; }
.h-word { transform: none; }
.hero-headline { font-family: Georgia, 'Times New Roman', serif; line-height: 0.96; letter-spacing: -0.045em; }
.h-word { font-size: clamp(3.9rem, 8.4vw, 8.2rem); }
.hero-sub { max-width: 650px; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.hero-metrics { backdrop-filter: none; background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); border-radius: 999px; }
.metric-val, .metric-suffix { font-variant-numeric: tabular-nums; }
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero-particles i {
  position: absolute;
  left: 50%; top: 46%; width: 2px; height: 2px; border-radius: 50%;
  background: var(--accent-bright); opacity: 0;
  animation: heroDisperse 5.6s var(--ease) infinite;
}
.hero-particles i:nth-child(3n) { width: 1px; height: 1px; animation-delay: -1.4s; }
.hero-particles i:nth-child(3n+1) { animation-delay: -2.8s; }
.hero-particles i:nth-child(5n) { width: 4px; height: 4px; animation-delay: -4.2s; }
.hero-particles i:nth-child(2n) { --particle-x: 31vw; --particle-y: -14vh; }
.hero-particles i:nth-child(3n) { --particle-x: -36vw; --particle-y: 18vh; }
.hero-particles i:nth-child(4n) { --particle-x: 38vw; --particle-y: 22vh; }
.hero-particles i:nth-child(5n) { --particle-x: -28vw; --particle-y: -24vh; }
.hero-particles i:nth-child(7n) { --particle-x: 12vw; --particle-y: 34vh; }
@keyframes heroDisperse { 0% { opacity: 0; transform: translate3d(0,0,0) scale(0.95); } 18% { opacity: 0.85; } 74% { opacity: 0.4; } 100% { opacity: 0; transform: translate3d(var(--particle-x),var(--particle-y),0) scale(1.25); } }
.scroll-dot { top: 4px; animation: scrollDotTransform 2.2s var(--ease) infinite; }
@keyframes scrollDotTransform { 0% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; transform: translate(-50%,14px); } }

/* Frame 1: restrained pill at rest; rim and broad bloom on hover. */
.btn-nova, .btn-outline, .nav-cta {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(224,200,160,0.24);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018));
  color: var(--gold-hot);
  overflow: visible;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 140ms var(--ease), opacity 140ms var(--ease);
}
.btn-nova::before, .btn-outline::before, .nav-cta::before {
  content: '';
  position: absolute;
  inset: -28px -34px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(224,200,160,0.28), rgba(196,168,130,0.08) 46%, transparent 72%);
  opacity: 0;
  transform: scale(0.95);
  transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}
.btn-nova:hover, .btn-outline:hover, .nav-cta:hover { border-color: var(--accent-bright); color: var(--gold-hot); transform: translateY(-1px); }
.btn-nova:hover::before, .btn-outline:hover::before, .nav-cta:hover::before { opacity: 1; transform: scale(1); }
.btn-nova-glow { display: none; }

/* Frame 3: accordion becomes a true dropdown surface with wrapping pills. */
.cap-accordion { display: grid; gap: 0.75rem; border: 0; max-width: 980px; }
.cap-item {
  border: 1px solid var(--glass-line);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  overflow: visible;
}
.cap-header { min-height: 72px; padding: 1rem 1.35rem; cursor: pointer; }
.cap-toggle { transform: rotate(0deg); transition: transform 200ms var(--ease); }
.cap-toggle span { width: 11px !important; height: 1px !important; top: 50% !important; background: var(--accent-bright); }
.cap-toggle span:first-child { left: 1px !important; transform: rotate(40deg) !important; }
.cap-toggle span:last-child { left: 9px !important; transform: rotate(-40deg) !important; opacity: 1 !important; }
.cap-item.open .cap-toggle { transform: rotate(180deg); }
.cap-body { display: none; max-height: none !important; padding: 0 1.35rem 1.35rem 4.45rem; opacity: 0; transform: translateY(-8px); transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
.cap-item.open .cap-body { display: block; opacity: 1; transform: translateY(0); animation: dropdownEnter 200ms var(--ease); }
@keyframes dropdownEnter { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cap-tags button { min-height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); padding: 0.55rem 1rem; transition: transform 140ms var(--ease), opacity 140ms var(--ease); }
.cap-item.open .cap-tags button:first-child { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: #0a0a0c; border-color: var(--accent-bright); }

/* Frame 11: tilted phone showcase with a warm backlight and feature pills. */
.device-showcase { overflow: hidden; border-block: 1px solid var(--border); }
.showcase-grid { display: grid; grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.device-scene { min-height: 590px; display: grid; place-items: center; position: relative; perspective: 1100px; }
.device-glow { position: absolute; width: 430px; height: 330px; border-radius: 50%; background: radial-gradient(ellipse, rgba(224,160,72,0.3), rgba(196,168,130,0.1) 46%, transparent 72%); transform: rotate(-12deg); opacity: 0.9; }
.device-phone {
  width: 260px; height: 530px; padding: 10px; border-radius: 42px; position: relative;
  background: linear-gradient(145deg, #353438, #111114 42%, #050507);
  border: 1px solid rgba(244,228,196,0.32);
  box-shadow: 0 42px 70px rgba(0,0,0,0.48);
  transform: rotateY(-18deg) rotateZ(8deg) translateZ(0);
  transition: transform 260ms var(--ease-smooth), opacity 260ms var(--ease);
}
.device-scene:hover .device-phone { transform: rotateY(-10deg) rotateZ(4deg) translate3d(0,-6px,0); }
.device-speaker { position: absolute; z-index: 2; top: 19px; left: 50%; width: 72px; height: 18px; border-radius: 999px; background: #08080a; transform: translateX(-50%); }
.device-screen { height: 100%; border-radius: 33px; padding: 54px 18px 20px; overflow: hidden; color: var(--text-heading); background: radial-gradient(circle at 80% 12%, rgba(196,168,130,0.16), transparent 28%), #0d0d10; }
.device-status { display: flex; justify-content: space-between; font: 500 9px var(--font-mono); color: var(--text-muted); }
.device-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.device-greeting { display: flex; flex-direction: column; margin: 34px 0 22px; }
.device-greeting small, .device-kpis small { font: 400 8px var(--font-mono); letter-spacing: .14em; color: var(--accent); }
.device-greeting strong { font: 300 25px Georgia, serif; }
.device-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.device-kpis span { padding: 13px; border: 1px solid var(--glass-line); border-radius: 12px; background: rgba(255,255,255,.025); }
.device-kpis b { display: block; margin-top: 5px; font-weight: 300; }
.device-chart { height: 138px; margin: 18px 0; display: flex; align-items: end; gap: 7px; padding: 16px; border: 1px solid var(--glass-line); border-radius: 14px; }
.device-chart i { flex: 1; height: 38%; background: linear-gradient(var(--accent-bright), rgba(196,168,130,.18)); border-radius: 3px 3px 0 0; transform: scaleY(.72); transform-origin: bottom; }
.device-chart i:nth-child(2), .device-chart i:nth-child(6) { height: 68%; }.device-chart i:nth-child(3) { height: 48%; }.device-chart i:nth-child(4) { height: 88%; }.device-chart i:nth-child(5) { height: 58%; }.device-chart i:nth-child(7) { height: 76%; }
.device-rows { display: grid; gap: 8px; }.device-rows span { display: block; height: 30px; border-radius: 9px; background: rgba(255,255,255,.045); }
.showcase-heading { max-width: 620px; font: 300 clamp(2.8rem, 5vw, 5.6rem)/1.02 Georgia, serif; color: var(--text-heading); letter-spacing: -.035em; }
.showcase-copy > p { max-width: 560px; margin: 1.5rem 0 2rem; color: var(--text-secondary); }
.showcase-tags { display: flex; flex-wrap: wrap; gap: .7rem; }.showcase-tags span { padding: .65rem 1rem; border: 1px solid rgba(224,200,160,.3); border-radius: 999px; font: 400 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-bright); }
.big-quote { max-width: 900px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4.2vw, 4.6rem); line-height: 1.18; letter-spacing: -.025em; }

/* Frame 4: glass work cards catch a gold rim and pool light beneath. */
.work-card {
  position: relative; isolation: isolate; overflow: visible;
  border: 1px solid var(--glass-line); border-radius: 20px;
  background: linear-gradient(145deg, var(--glass-specular), rgba(255,255,255,0.012) 42%, rgba(8,8,10,0.9));
  box-shadow: 0 24px 55px rgba(0,0,0,0.38);
  transform: perspective(900px) rotateX(1.5deg) rotateY(-1.5deg) translateZ(0);
  transition: transform 240ms var(--ease-smooth), opacity 240ms var(--ease);
}
.work-card::before {
  content: ''; position: absolute; z-index: -2; left: 6%; right: 6%; bottom: -44px; height: 82px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(224,184,116,.34), transparent 70%);
  opacity: 0; transform: scale(.95); transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.work-card::after {
  content: ''; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, transparent 18%, rgba(244,228,196,.22) 48%, var(--accent-bright) 82%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 220ms var(--ease);
}
.work-card:hover, .work-card:focus-visible { transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translate3d(0,-7px,0); box-shadow: 0 24px 55px rgba(0,0,0,0.38); }
.work-card:hover::before, .work-card:focus-visible::before, .work-card:hover::after, .work-card:focus-visible::after { opacity: 1; transform: scale(1); }
.work-frame { border-radius: 19px 19px 0 0; overflow: hidden; }

/* Frame 9: orbital three-stage process. */
.process { overflow: hidden; }
.process-heading { margin: 1rem 0 1.5rem; text-align: center; font: 400 clamp(1rem, 1.8vw, 1.35rem) var(--font-mono); letter-spacing: .28em; text-transform: uppercase; color: var(--accent-bright); }
.process .section-label { justify-content: center; }
.process-tabs { width: max-content; max-width: 100%; margin: 0 auto 4.5rem; padding: 5px; display: flex; gap: 4px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(255,255,255,.025); }
.process-tabs button { min-height: 38px; padding: .55rem 1rem; border-radius: 999px; font: 400 .58rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.process-tabs button[aria-selected="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: #0a0a0c; }
.process-stages { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,4vw,4rem); padding-top: 0; }
.process-stages::before { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; top: 112px; height: 1px; background: repeating-linear-gradient(90deg, rgba(224,200,160,.8) 0 3px, transparent 3px 12px); opacity: .45; }
.process-stages::after { content: ''; position: absolute; z-index: 2; left: 10%; top: 108px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hot); opacity: .8; transform: translateX(0); animation: processTraveller 5s var(--ease-smooth) infinite; }
.stage { display: block; text-align: center; }
.stage-visual { position: relative; min-height: 225px; align-items: center; }
.stage-ring { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #28272a, #0b0b0d 68%); box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 28px 42px rgba(0,0,0,.35); transform: scale(.94); transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
.stage-ring svg { opacity: .34; }
.stage-progress { transition: none; stroke-dashoffset: 0 !important; }
.stage-num { font: 300 1.45rem Georgia, serif; color: var(--accent-bright); }
.orbit { position: absolute; left: 50%; top: 50%; width: 208px; height: 88px; border: 1px solid rgba(224,200,160,.34); border-radius: 50%; transform: translate(-50%,-50%) rotate(-13deg); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.orbit-b { width: 190px; height: 104px; transform: translate(-50%,-50%) rotate(27deg); opacity: .6; }
.orbit-a { animation: orbitTravelA 6s var(--ease-smooth) infinite; }
.orbit-b { animation: orbitTravelB 7s var(--ease-smooth) infinite reverse; }
.orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-bright); }
.orbit i:first-child { left: 9%; top: 25%; }.orbit i:last-child { right: 12%; bottom: 18%; }.orbit-b i { left: 48%; top: -2px; }
.is-active .stage-ring { transform: scale(1.06); }.is-active .orbit { border-color: var(--gold-hot); opacity: 1; }.is-active .stage-ring::before { content: ''; position: absolute; inset: -76px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(224,184,116,.24), transparent 68%); }
.process-active-dot { position: absolute; top: 1px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-bright); opacity: 0; transform: translateX(-50%) scale(.95); transition: transform 180ms var(--ease), opacity 180ms var(--ease); }
.is-active .process-active-dot { opacity: 1; transform: translateX(-50%) scale(1); }
.stage-content h3 { font: 400 .74rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); }
.stage-content p { margin-inline: auto; font-size: .86rem; }
.stage-outputs { justify-content: center; }.stage-outputs span { border-radius: 999px; }
@keyframes processTraveller { 0% { opacity: 0; transform: translateX(0); } 12%, 88% { opacity: .8; } 100% { opacity: 0; transform: translateX(64vw); } }
@keyframes orbitTravelA { 0% { transform: translate(-50%,-50%) rotate(-13deg); } 100% { transform: translate(-50%,-50%) rotate(347deg); } }
@keyframes orbitTravelB { 0% { transform: translate(-50%,-50%) rotate(27deg); } 100% { transform: translate(-50%,-50%) rotate(387deg); } }

/* Frame 10 + frame 2: pooled card glow and notched floating fields. */
.contact { padding-bottom: clamp(7rem, 12vw, 11rem); }
.contact-grid { align-items: center; }
.contact-heading { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3.4rem, 6.8vw, 7rem); line-height: .96; letter-spacing: -.05em; font-weight: 300; }
.contact-right { position: relative; isolation: isolate; }
.contact-right::before { content: ''; position: absolute; z-index: -1; inset: -18% -22% -24%; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, rgba(224,151,58,.32), rgba(196,168,130,.11) 46%, transparent 72%); opacity: .9; }
.contact-form { position: relative; padding: clamp(1.5rem,3vw,2.6rem); border-radius: 24px; border: 1px solid var(--glass-line); background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(14,14,17,.96) 38%); backdrop-filter: none; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.form-field { position: relative; display: block; min-height: 60px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; }
.form-field::after { content: ''; position: absolute; z-index: -1; inset: -18px; border-radius: 22px; background: radial-gradient(ellipse, rgba(224,200,160,.24), transparent 70%); opacity: 0; transform: scale(.95); transition: transform 180ms var(--ease), opacity 180ms var(--ease); }
.form-field label { position: absolute; z-index: 2; left: 15px; top: 18px; padding: 0 6px; color: var(--text-muted); transform-origin: left center; transition: transform 180ms var(--ease), opacity 180ms var(--ease); pointer-events: none; }
.form-field label::before { content: ''; position: absolute; z-index: -1; inset: 1px 0; background: #121215; opacity: 0; transition: opacity 120ms var(--ease); }
.form-field :is(input, textarea, select) { width: 100%; min-height: 58px; border: 0; padding: 18px 15px 8px; background: transparent; outline: 0; }
.form-field textarea { min-height: 118px; padding-top: 24px; }
.form-field:focus-within { border-color: var(--accent-bright); }
.form-field:focus-within::after { opacity: 1; transform: scale(1); }
.form-field:focus-within label, .form-field.has-value label { color: var(--accent-bright); transform: translateY(-21px) scale(.86); }
.form-field:focus-within label::before, .form-field.has-value label::before { opacity: 1; }
.form-field :is(input,textarea,select):focus-visible { outline: none; }
.btn-submit { border-radius: 10px; background: linear-gradient(100deg, #b89568, var(--gold-hot) 52%, #c7a36f); color: #0a0a0c; font-weight: 500; border-color: var(--gold-hot); }
.contact-info { gap: .9rem; }.info-item { min-height: 48px; display: grid; grid-template-columns: 36px auto 1fr; align-items: center; column-gap: .75rem; }.info-icon { grid-row: 1 / span 2; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(224,200,160,.34); border-radius: 50%; color: var(--accent-bright); }.info-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Frame 5: a single curved narrative thread, revealed by a translating cover. */
.story-thread { position: absolute; z-index: 1; top: 0; left: max(18px, calc((100vw - 1400px) / 2)); width: 140px; overflow: hidden; pointer-events: none; opacity: .92; }
.story-thread-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story-thread-svg path { fill: none; stroke: var(--accent-bright); stroke-width: 1.25; opacity: .75; }
/* .story-thread-cover is retired. It was inset:0 inside a 140x11000px
   container with will-change:transform, which pinned a ~25MB composited
   layer for the whole session. The thread now draws itself with
   stroke-dashoffset instead. Kept hidden rather than deleted so the
   markup stays valid. */
.story-thread-cover { display: none; }
.story-thread-node { position: absolute; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--accent-bright); border-radius: 50%; color: var(--gold-hot); background: #0a0a0c; font: 400 0.6875rem var(--font-mono); opacity: 0; transform: translate(-50%,-50%) scale(.95); transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
.story-thread-node.is-revealed { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Remove large-surface blur from legacy components. */
.hero-metrics, .cap-insight-overlay, .mobile-menu, .nav.scrolled { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

@media (max-width: 900px) {
  .story-thread { display: none; }
  .showcase-grid { grid-template-columns: 1fr; }
  .device-scene { min-height: 520px; }
  .showcase-copy { text-align: center; }.showcase-copy .section-label, .showcase-tags { justify-content: center; }.showcase-copy > p { margin-inline: auto; }
  .process-stages { grid-template-columns: 1fr; gap: 4.5rem; }.process-stages::before { left: 50%; right: auto; top: 5%; width: 1px; height: 90%; background: repeating-linear-gradient(180deg, rgba(224,200,160,.8) 0 3px, transparent 3px 12px); }.process-stages::after { display: none; }.process-tabs { overflow-x: auto; }.stage-content p { max-width: 560px; }
}
@media (max-width: 640px) {
  .hero { padding-inline: 1.25rem; }
  .h-word { font-size: clamp(3rem, 14.5vw, 4rem); }
  .hero-sub { max-width: 100%; font-size: 1rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }.btn-nova, .btn-outline { width: 100%; justify-content: center; }
  .hero-metrics { width: 100%; gap: 1rem; padding: 1.25rem 1rem; border-radius: 22px; }.metric-val { font-size: 2.1rem; }
  .device-phone { transform: rotateY(-10deg) rotateZ(5deg) scale(.88); }.device-scene { min-height: 470px; }
  .process-tabs { width: 100%; }.process-tabs button { flex: 1; padding-inline: .45rem; font-size: 0.6875rem; }
  .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
  .hero-particles i { opacity: .45; }.ignition-core, .ignition-rays { opacity: .8; }.story-thread-cover { display: none; }.story-thread-node { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* NOTE: a universal `transition-property: transform, opacity !important` used
   to sit here. It was removed. The rule it was trying to enforce is "never
   animate LAYOUT properties" — width, height, top, left, margin, padding —
   because those force a layout pass every frame. Colour, border-colour and
   box-shadow are paint, not layout, and transitioning them on a hover or a
   focus is both cheap and necessary: without it the gold rim, the field
   focus ring and the theme fade all snapped instantly instead of easing.
   Each rule below declares its own transition-property deliberately. */
.deploy-dot { animation: none !important; }
.scroll-orbit { animation-timing-function: var(--ease-smooth); }
.work-card:hover .wm-pulse { animation-timing-function: var(--ease-smooth); }

/* ═══════════════════════════════════════════════
   DEVICE — ambient float
   The phone already owns `transform` for its tilt and its hover state,
   so the float animates the independent `translate` property instead.
   The two compose rather than overwrite, which means the hover still
   works mid-float and neither needs to know about the other.
   Both are compositor-only.
   ═══════════════════════════════════════════════ */

.device-phone {
  animation: device-float 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: translate;
}

@keyframes device-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -18px; }
}

/* The light pooled behind it breathes on a slower, offset cycle so the
   two never sync into an obvious pulse. */
.device-scene::after {
  animation: device-halo 11s ease-in-out infinite;
}

@keyframes device-halo {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

/* Pausing on hover lets someone actually look at the screen content
   instead of chasing it. */
.device-scene:hover .device-phone { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .device-phone { animation: none; translate: 0 0; }
  .device-scene::after { animation: none; opacity: 0.7; }
}

/* ═══════════════════════════════════════════════
   OFFSCREEN ANIMATION PAUSE
   39 infinite animations were running at all times, including on
   sections nowhere near the viewport. Even compositor-only work is
   still work: it keeps the GPU busy and drains battery for motion
   nobody can see. main.js observes the animated elements and adds
   this class whenever they leave the viewport.
   ═══════════════════════════════════════════════ */
.anim-idle,
.anim-idle::before,
.anim-idle::after {
  animation-play-state: paused !important;
}

/* ═══════════════════════════════════════════════
   SELECTED WORK — real engagements
   Sits above the illustrative "Example Builds" grid so verifiable proof
   leads and the conceptual pieces read as secondary. Deliberately typographic
   rather than image-led: the only screenshots available are of a build that
   is no longer deployed, and a stale screenshot is worse than none.
   ═══════════════════════════════════════════════ */

.selected-work .sw-list {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.sw-item {
  position: relative;
  padding: 2.25rem 2rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  /* Opaque on purpose. The decorative story thread runs down the page at
     x 18-158 and these cards start at x 48, so ~110px of gold line sits
     behind every card. At any alpha below 1 it bleeds through and reads as
     a scratch across the content. A card carrying case-study copy is not
     the place for translucency. */
  background: linear-gradient(180deg, #1c1b21, #101014);
  /* Compositor-only, and named rather than `all`. */
  transition: transform 0.32s var(--ease), border-color 0.32s var(--ease);
}

.sw-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(224, 200, 160, 0.4), 0 18px 46px rgba(196, 168, 130, 0.13);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  pointer-events: none;
}

.sw-item:hover { transform: translateY(-3px); }
.sw-item:hover::after { opacity: 1; }

.sw-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.sw-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.sw-title {
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-heading);
  margin: 0;
}

.sw-cat {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sw-link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}

.sw-link:hover,
.sw-link:focus-visible { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }

/* Label / value pairs. On wide screens the label sits in its own column so
   the four labels line up and the eye can scan straight down them. */
.sw-body {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.85rem 1.75rem;
  margin: 1.5rem 0 0;
}

.sw-body dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.15rem;
}

.sw-body dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.sw-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sw-stack span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

@media (max-width: 720px) {
  .sw-item { padding: 1.75rem 1.25rem; }
  .sw-body { grid-template-columns: 1fr; gap: 0.3rem 0; }
  .sw-body dt { padding-top: 0.9rem; }
  .sw-link { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-item:hover { transform: none; }
}

/* ═══════════════════════════════════════════════
   SELECTED WORK — visual grid
   Real screenshots of live sites, in a browser chrome frame so it reads
   as "this is a running site" rather than "this is a picture". The frame
   carries the domain, which is the credibility: it is checkable.
   ═══════════════════════════════════════════════ */

.sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.75rem;
  margin-top: 3.5rem;
}

.sw-shot {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.34s var(--ease);
}

.sw-frame {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Opaque: the story thread runs behind these. */
  background: #131317;
  overflow: hidden;
  transition: border-color 0.34s var(--ease);
}

.sw-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(224, 200, 160, 0.42), 0 22px 52px rgba(196, 168, 130, 0.16);
  opacity: 0;
  transition: opacity 0.34s var(--ease);
  pointer-events: none;
}

/* Browser chrome. Three dots and the real domain. */
.sw-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: #1b1a20;
  border-bottom: 1px solid var(--border);
}

.sw-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
}

.sw-bar em {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  /* Slightly recessed until hovered, so the grid reads as one composition
     rather than three competing screenshots. */
  opacity: 0.86;
  transition: opacity 0.34s var(--ease);
}

.sw-shot:hover { transform: translateY(-4px); }
.sw-shot:hover .sw-frame::after,
.sw-shot:focus-visible .sw-frame::after { opacity: 1; }
.sw-shot:hover .sw-frame img,
.sw-shot:focus-visible .sw-frame img { opacity: 1; }
.sw-shot:hover .sw-go { color: var(--accent-bright); }

/* One line, always. A longer name ("Lady Life Insurance / Financial
   Services") used to push VISIT onto its own row, so one card in three sat
   a line taller than the others and the grid lost its baseline. The
   category truncates instead — it is the least load-bearing element here. */
.sw-cap {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.7rem;
  padding-left: 0.15rem;
}

.sw-cap strong {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-heading);
  white-space: nowrap;
  flex: none;
}

.sw-cap em {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  /* min-width:0 is what actually lets a flex item shrink below its content. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-go {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.24s var(--ease);
}

.sw-shot:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 6px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .sw-shot:hover { transform: none; }
}

/* ═══════════════════════════════════════════════
   ANIMATED ARTEFACTS
   Every one of these is transform or opacity only, so they ride the
   compositor and cannot reintroduce the scroll jank that was just
   removed. Each is also gated behind prefers-reduced-motion.
   ═══════════════════════════════════════════════ */

/* ── Reading progress: a hairline that fills as you descend ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg,
    rgba(196, 168, 130, 0) 0%,
    var(--accent) 22%,
    var(--accent-bright) 68%,
    #f4e4c4 100%);
  will-change: transform;
}

/* ── Shimmer: a narrow highlight that rakes across a card on hover.
   Uses a masked pseudo-element translated past the edge, so nothing
   repaints — the gradient is painted once and only moved. ── */
.sw-frame,
.work-card,
.ind-card {
  position: relative;
  overflow: hidden;
}

.sw-frame::before,
.work-card::before,
.ind-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(244, 228, 196, 0.09) 45%,
    rgba(244, 228, 196, 0.16) 50%,
    rgba(244, 228, 196, 0.09) 55%,
    transparent 100%);
  transform: translate3d(-160%, 0, 0) skewX(-12deg);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.sw-shot:hover .sw-frame::before,
.work-card:hover::before,
.ind-card:hover::before {
  opacity: 1;
  animation: shimmerSweep 0.95s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shimmerSweep {
  from { transform: translate3d(-160%, 0, 0) skewX(-12deg); }
  to   { transform: translate3d(320%, 0, 0)  skewX(-12deg); }
}

/* ── Section rules draw themselves in when their section arrives ──
   Scoped to .js-reveal, which main.js adds ONLY after it has successfully
   set up the observer. Without that guard a missing or non-firing
   IntersectionObserver would leave every rule at scaleX(0) — permanently
   invisible. A reveal animation must never be the reason content is
   missing; absent JS, these simply render at full width. */
.js-reveal .section-label .label-line {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal .section-label.is-drawn .label-line { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .sw-frame::before, .work-card::before, .ind-card::before { display: none; }
  .section-label .label-line { transform: scaleX(1); transition: none; }
}