/* ============================================================
   TRISET — PREMIUM SYSTEM LAYER
   Loads AFTER styles.css. Wins the cascade on shared selectors
   by load order, so nothing below is destructive to the legacy
   file — it can be unhooked by removing one <link> tag.

   Signature idea: a survey/coordinate motif — mono-spaced grid
   references, corner brackets, scan lines — laid over the
   brand's real subject (GIS / LiDAR / aerial mapping) rather
   than generic gradients-and-glow decoration.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* refined tokens — same names as legacy file, values are the ones
     that should actually win */
  --brand-primary: #0B66FF;
  --brand-primary-deep: #0A3A66;
  --brand-primary-dark: #061B35;
  --brand-signal: #D92B2B;
  --ink: #0F1724;
  --muted: #5B6B7C;
  --paper: #FBFCFD;
  --surface: #ffffff;
  --line: rgba(15, 23, 36, 0.12);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --ease: cubic-bezier(.16,.84,.28,1);

  /* new tokens */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --space-1: .5rem;
  --space-2: .875rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --dur-fast: .22s;
  --dur-med: .5s;
  --dur-slow: .9s;

  --grid-line: rgba(15, 23, 36, 0.06);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .brand span, .logo-word {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ---------- coordinate / mono label system (signature) ---------- */
.eyebrow,
.explorer-brand .eyebrow,
.service-meta .eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--brand-signal);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  display: inline-block;
  transform: rotate(45deg);
}

.geo-tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(247,251,255,.62);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  white-space: nowrap;
}
.geo-tag::before { content: '\2316'; opacity: .7; }
.geo-tag b { color: rgba(247,251,255,.92); font-weight: 500; }

/* corner-bracket frame — used on the hero visual and imagery panels */
.geo-frame { position: relative; }
.geo-frame::before,
.geo-frame::after,
.geo-frame .gf-tl,
.geo-frame .gf-br { content: ''; position: absolute; width: 22px; height: 22px; z-index: 3; pointer-events: none; }
.geo-frame::before { top: 14px; left: 14px; border-top: 1.5px solid rgba(255,255,255,.55); border-left: 1.5px solid rgba(255,255,255,.55); }
.geo-frame::after { bottom: 14px; right: 14px; border-bottom: 1.5px solid rgba(255,255,255,.55); border-right: 1.5px solid rgba(255,255,255,.55); }

/* ---------- header / nav ---------- */
.site-header {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.site-header.is-scrolled {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  border-bottom-color: rgba(15,23,36,0.06);
  box-shadow: 0 12px 30px rgba(15,23,36,.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
.site-header .container {
  transform: translateY(-1px);
  padding-top: 0.2rem;
  padding-bottom: 0.14rem;
  gap: 1rem;
}
.home-page .site-header .container {
  width: 100%;
  max-width: none;
  padding-left: 1.5rem;
  padding-right: 1.25rem;
}
.brand span { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.brand span small { font-family: var(--font-mono); font-weight: 400; letter-spacing: .04em; opacity: .55; }

.site-nav {
  transform: translateY(-2px);
  margin-left: auto;
  justify-content: flex-end;
}

.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .92rem;
  position: relative;
  border: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a.active {
  background: rgba(255,255,255,0.32);
  border-color: rgba(11,102,255,0.08);
}
.site-nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 1.5px;
  background: var(--brand-primary);
  transition: right var(--dur-fast) var(--ease);
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a.active:not(.nav-cta)::after { right: 0; }
.site-nav a.active { color: var(--brand-primary); }

.nav-cta {
  font-family: var(--font-body);
  font-weight: 600;
  background: var(--ink);
  border-radius: 100px;
  padding: .55rem 1.15rem;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); background: var(--brand-primary); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 100px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-primary {
  background: var(--brand-primary);
  box-shadow: 0 14px 32px rgba(11,102,255,.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11,102,255,.36); }
.btn:not(.btn-primary):hover { transform: translateY(-2px); border-color: var(--brand-primary); }

/* ============================================================
   HOME HERO — flagship rebuild
   ============================================================ */
.home-page .hero {
  background: radial-gradient(1200px 600px at 82% -10%, rgba(11,102,255,.30), transparent 55%),
              radial-gradient(900px 500px at 10% 110%, rgba(217,43,43,.14), transparent 50%),
              linear-gradient(160deg, #050d18 0%, #0a3a66 62%, #0f2b4a 100%);
  min-height: clamp(560px, 82vh, 780px);
  padding: 9rem 0 3.6rem;
  isolation: isolate;
}
.home-page .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 60% 20%, #000 30%, transparent 78%);
  opacity: 1;
  z-index: 0;
}
.home-page .hero-grid { position: relative; z-index: 1; align-items: center; }

.home-page .hero-copy .geo-tag { margin-bottom: var(--space-2); opacity: 0; animation: geoIn .7s var(--ease) .05s forwards; }

.home-page h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.9rem, 4.6vw + .6rem, 5.1rem);
  line-height: .96;
  letter-spacing: -.02em;
  max-width: 760px;
  opacity: 0;
  animation: heroLineIn .8s var(--ease) .12s forwards;
}
.home-page h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #fff 20%, #bcd6ff 55%, #fff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-page .hero .lead {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(232,240,248,.82);
  opacity: 0;
  animation: heroLineIn .8s var(--ease) .26s forwards;
}

.home-page .hero-actions {
  opacity: 0;
  animation: heroLineIn .8s var(--ease) .38s forwards;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.home-page .hero-actions .scroll-hint {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: rgba(232,240,248,.5);
  text-transform: uppercase;
}

.home-page .spatial-visual {
  opacity: 0;
  animation: heroPanelIn 1s var(--ease) .3s forwards;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px rgba(3,10,20,.55);
}
.home-page .spatial-visual .visual-label {
  font-family: var(--font-body);
}
.home-page .spatial-visual .visual-label strong { font-family: var(--font-display); }

/* ============================================================
   HOME HERO — Full screen image display, complete
   ============================================================ */
.home-page .hero {
  padding: 0 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  width: 100vw !important;
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

@media (max-width: 1200px) {
  .home-page .hero {
    height: 90vh !important;
    max-height: 90vh !important;
  }
}

@media (max-width: 768px) {
  .home-page .hero {
    height: 65vh !important;
    max-height: 65vh !important;
  }
}

@media (max-width: 600px) {
  .home-page .hero {
    height: 60vh !important;
    max-height: 60vh !important;
  }
}

@media (max-width: 480px) {
  .home-page .hero {
    height: 58vh !important;
    max-height: 58vh !important;
  }
}

@media (max-width: 380px) {
  .home-page .hero {
    height: 56vh !important;
    max-height: 56vh !important;
  }
}

.home-page .hero::before {
  display: none !important;
}

/* Hide all hero text — image fills entire space */
.home-page .hero-copy,
.home-page .hero-grid > div:nth-child(1) {
  display: none !important;
}

.home-page .hero-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  gap: 0 !important;
}

@media (max-width: 768px) {
  .home-page .hero-grid {
    height: 100% !important;
  }
}

.home-page .spatial-visual {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  animation: none !important;
  overflow: hidden !important;
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* Make image fill the space cleanly */
.home-page .spatial-visual img {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .home-page .spatial-visual img {
    object-position: center top !important;
  }
}

@media (max-width: 480px) {
  .home-page .spatial-visual img {
    object-position: center top !important;
  }
}

/* Hide trust strip and any other overlays */
.home-page .hero .trust-strip,
.home-page .hero > .container {
  display: none !important;
}

/* Ensure nothing overlaps */
.home-page .hero-mesh,
.home-page .home-orbit,
.home-page .home-orbit-a,
.home-page .home-orbit-b,
.home-page .home-capability-stack,
.home-page .visual-label,
.home-page .spatial-visual canvas {
  display: none !important;
}

/* Next section starts properly */
.home-page .section:first-of-type {
  margin-top: 0;
  padding-top: 3.2rem;
}

body {
  overflow-x: hidden !important;
}

@keyframes heroLineIn {
  from { opacity: 0; transform: translateY(16px) scale(.99); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes heroPanelIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); clip-path: inset(0 0 8% 0); }
  to   { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0); }
}
@keyframes geoIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .home-page h1, .home-page .hero .lead, .home-page .hero-actions,
  .home-page .spatial-visual, .home-page .hero-copy .geo-tag {
    opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
}

/* trust strip → survey-marks bar */
.trust-strip {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}
.trust-strip span {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: rgba(232,240,248,.58);
  display: flex;
  align-items: center;
  gap: .55em;
}
.trust-strip span::before { content: ''; width: 5px; height: 5px; background: var(--brand-signal); border-radius: 50%; flex: none; }

/* ---------- services quick grid (home) ---------- */
.service-quick-grid { position: relative; }
.service-card-link { display: block; }
.service-pill-panel {
  position: relative;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--space-3) var(--space-2) var(--space-2);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  overflow: hidden;
}
.service-pill-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(11,102,255,.05), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.service-pill-panel h3 { font-family: var(--font-display); font-size: 1.15rem; margin: .3rem 0 .4rem; }
.service-pill-panel p { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.service-card-link:hover .service-pill-panel {
  transform: translateY(-5px);
  border-color: rgba(11,102,255,.32);
  box-shadow: 0 22px 44px rgba(15,23,36,.09);
}
.service-card-link:hover .service-pill-panel::before { opacity: 1; }

/* ---------- featured work cards ---------- */
.featured-grid .feature-card { border-radius: var(--radius-sm); overflow: hidden; }
.feature-card img { transition: transform .7s var(--ease); }
.feature-card:hover img { transform: scale(1.06); }
.feature-copy h3 { font-family: var(--font-display); }
.feature-meta { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-primary); }

/* ---------- value mini-grid ---------- */
.mini-value { position: relative; padding-left: var(--space-3); }
.mini-number {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--brand-signal);
  display: block;
  margin-bottom: .5rem;
}
.mini-value h3 { font-family: var(--font-display); font-size: 1.05rem; }

/* ---------- cta band ---------- */
.cta-band h2 { font-family: var(--font-display); letter-spacing: -.01em; }

/* ---------- reveal-on-scroll refinement ---------- */
.reveal { transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), filter var(--dur-med) var(--ease); }
.reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); filter: blur(3px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

@media (max-width: 980px) {
  .site-header .container {
    min-height: 60px;
  }

  .site-nav {
    gap: .08rem;
  }

  .site-nav a,
  .theme-toggle,
  .menu-toggle {
    font-size: .8rem;
    padding: .5rem .6rem;
  }

  .home-page .hero {
    padding-top: 7.2rem;
  }

  .home-page .hero-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-page .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .home-page .hero-copy {
    text-align: left;
  }

  .home-page .hero-copy .lead {
    max-width: 100%;
  }

  .home-page .hero-actions {
    flex-wrap: wrap;
  }

  .service-quick-grid,
  .value-grid,
  .featured-grid {
    gap: 1rem;
  }

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .site-header .container {
    min-height: 58px;
  }

  .brand {
    gap: .55rem;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  .brand span {
    font-size: .78rem;
  }

  .brand small {
    letter-spacing: .12em;
  }

  .site-nav a,
  .theme-toggle,
  .menu-toggle {
    font-size: .76rem;
    padding: .48rem .56rem;
  }

  .home-page .hero {
    padding-top: 6.5rem;
    min-height: 0;
  }

  .home-page .hero-copy {
    text-align: left;
  }

  .home-page h1 {
    font-size: clamp(2.3rem, 10vw, 3.2rem);
  }

  .home-page .hero .lead {
    font-size: 1rem;
  }

  .home-page .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
  }

  .service-quick-grid,
  .value-grid,
  .featured-grid,
  .footer-grid,
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-quick-grid .panel,
  .value-grid .mini-value {
    min-height: 100%;
  }

  .service-pill-panel {
    padding: 1rem .85rem .9rem;
  }

  .service-pill-panel h3 {
    font-size: 1rem;
  }

  .service-pill-panel p {
    font-size: .78rem;
    line-height: 1.45;
  }

  .trust-strip {
    gap: .7rem .9rem;
  }

  .trust-strip span {
    font-size: .66rem;
  }

  .section,
  .compact-section {
    padding: 2.6rem 0;
  }

  .home-page .section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-page .section-header h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .cta-band {
    padding: 1.5rem;
  }

  .footer {
    padding: 2.4rem 0 1.5rem;
  }

  .footer-grid {
    gap: 1rem;
  }

  .reveal,
  .reveal:not(.is-visible),
  .home-page .hero-copy .geo-tag,
  .home-page h1,
  .home-page .hero .lead,
  .home-page .hero-actions,
  .home-page .spatial-visual {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

@media (max-width: 430px) {
  .service-quick-grid,
  .value-grid,
  .trust-strip,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-pill-panel {
    padding: .9rem .75rem .8rem;
  }

  .service-pill-panel h3 {
    font-size: .95rem;
  }

  .service-pill-panel p {
    font-size: .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal:not(.is-visible) { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .home-page .hero { padding: 7.4rem 0 2.6rem; min-height: 0; }
  .home-page h1 { font-size: clamp(2.4rem, 8vw, 3rem); }
  .trust-strip { gap: var(--space-2); }
}
@media (max-width: 620px) {
  .home-page .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

/* ============================================================
   INTERNAL PAGE HERO (careers, projects/work, solutions, about)
   ============================================================ */
.internal-page .hero {
  background: radial-gradient(900px 500px at 85% -10%, rgba(11,102,255,.28), transparent 55%),
              linear-gradient(160deg, #050d18 0%, #0a3a66 62%, #0f2b4a 100%);
}
.internal-page .hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.internal-page .hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  opacity: 0;
  animation: heroLineIn .75s var(--ease) .08s forwards;
}
.internal-page .hero .eyebrow { opacity: 0; animation: geoIn .6s var(--ease) 0s forwards; }
.internal-page .hero .lead { opacity: 0; animation: heroLineIn .75s var(--ease) .2s forwards; }
.internal-page .hero .hero-actions { opacity: 0; animation: heroLineIn .75s var(--ease) .3s forwards; }
.internal-page .hero .image-panel img,
.internal-page .hero .spatial-visual img { transition: transform .8s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .internal-page .hero h1, .internal-page .hero .eyebrow, .internal-page .hero .lead, .internal-page .hero .hero-actions {
    opacity: 1 !important; animation: none !important;
  }
}

.internal-page .section-header h2, .compact-header h2 {
  font-family: var(--font-display);
  letter-spacing: -.015em;
}

.panel {
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.panel:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15,23,36,.08); }
.panel h3 { font-family: var(--font-display); }

/* ============================================================
   SERVICES — kinetic hero + marquee
   ============================================================ */
/* FIX: legacy CSS gates .skh-kicker/.skh-title/.skh-lead/.skh-actions on a
   `.services-kinetic-hero.is-in` class that only the old pill-hero script
   ever added — that script's target element doesn't exist in the current
   markup, so the class never lands and this text stays invisible forever.
   Give it its own entrance, independent of that dead dependency. */
.skh-kicker, .skh-title, .skh-lead, .skh-actions {
  opacity: 1 !important;
  transform: none !important;
}
.skh-kicker {
  font-family: var(--font-mono);
  letter-spacing: .16em;
  animation: geoIn .6s var(--ease) both;
}
.skh-title {
  font-family: var(--font-display);
  font-weight: 700;
  animation: heroLineIn .8s var(--ease) .1s both;
}
.skh-lead {
  font-family: var(--font-body);
  animation: heroLineIn .8s var(--ease) .22s both;
}
.skh-actions { animation: heroLineIn .8s var(--ease) .32s both; }
.skh-meta span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
}
@media (prefers-reduced-motion: reduce) {
  .skh-kicker, .skh-title, .skh-lead, .skh-actions { animation: none !important; }
}

/* ============================================================
   SERVICE PILL PILE — gravity + drag capability stack
   ============================================================ */
.pill-pile-section {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-5) 0;
  overflow: hidden;
}
.pill-pile-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.pill-pile-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: -.01em;
  margin: .3rem 0 0;
  max-width: 520px;
}
.pill-pile-hint {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

.pill-pile-split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}

.pill-pile-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: -.01em;
  margin: .3rem 0 0;
}
.pill-pile-copy .pill-pile-lead {
  margin: var(--space-3) 0 var(--space-3);
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 46ch;
}
.pill-pile-copy .pill-pile-hint {
  display: inline-block;
}

.pill-pile-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  max-width: 340px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(rgba(15,23,36,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,36,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  border: 1px solid var(--line);
  overflow: hidden;
  touch-action: none;
}

@media (max-width: 900px) {
  .pill-pile-split {
    grid-template-columns: 1fr;
  }
  .pill-pile-stage {
    max-width: 100%;
  }
}

.pp-pill {
  position: absolute;
  top: 0; left: 0;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.66rem, .78vw, .8rem);
  color: #fff;
  white-space: nowrap;
  user-select: none;
  cursor: grab;
  will-change: transform;
  box-shadow: 0 10px 22px rgba(15,23,36,.16);
  transition: box-shadow .18s var(--ease), filter .18s var(--ease);
}
.pp-pill:hover { filter: brightness(1.06); box-shadow: 0 16px 30px rgba(15,23,36,.22); }
.pp-pill.is-dragging { cursor: grabbing; z-index: 40; box-shadow: 0 24px 44px rgba(15,23,36,.3); }
.pp-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.pp-pill--blue   { background: linear-gradient(135deg, #0B66FF, #2E86FF); }
.pp-pill--coral  { background: linear-gradient(135deg, #D92B2B, #FF5C5C); }
.pp-pill--mint   { background: linear-gradient(135deg, #0E9E86, #1FC9AA); }
.pp-pill--amber  { background: linear-gradient(135deg, #C9860A, #F5B63D); color: #2a1c00; }
.pp-pill--violet { background: linear-gradient(135deg, #6047C4, #8B7CF0); }

/* static fallback: reduced motion / touch / narrow viewports */
.pill-pile-stage.pp-static {
  height: auto;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .6rem;
  padding: var(--space-3);
  background-size: 24px 24px;
}
.pill-pile-stage.pp-static .pp-pill {
  position: static;
  cursor: default;
  transform: none !important;
}

@media (max-width: 760px) {
  .pill-pile-head { flex-direction: column; align-items: flex-start; }
  .pill-pile-stage.pp-static {
    gap: .5rem;
    padding: .8rem;
  }
  .pill-pile-stage.pp-static .pp-pill {
    font-size: .7rem;
    padding: .48rem .72rem;
  }
}

.services-hero-highlight { background: var(--paper); }
.highlight-strip span {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kinetic-category-header span {
  font-family: var(--font-mono);
  letter-spacing: .12em;
  color: var(--brand-signal);
}
.kinetic-category-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
}
.marquee-item {
  font-family: var(--font-display);
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.marquee-row:hover .marquee-item:hover {
  color: var(--brand-primary) !important;
}

.explorer-item { border-radius: var(--radius-sm); }
.explorer-item .index { font-family: var(--font-mono); }
.explorer-item .meta strong { font-family: var(--font-display); }

.service-card__body h3 { font-family: var(--font-display); }
.service-card__body .eyebrow { margin-bottom: .3rem; }
.icon-link {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
}

/* ============================================================
   CAREERS
   ============================================================ */
.job-listing { border-radius: var(--radius-sm); }
.job-listing h3 { font-family: var(--font-display); }
.job-meta-row {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
  display: flex;
  gap: 1rem;
  margin: .4rem 0 .6rem;
}
.badge {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
}
.job-points { padding-left: 1.1rem; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.job-actions { display: flex; gap: .6rem; margin-top: var(--space-2); flex-wrap: wrap; }
.empty-state { text-align: center; padding: var(--space-4) var(--space-3); }

/* ============================================================
   PROJECTS / WORK — editorial gallery rhythm
   ============================================================ */
.project-list { display: grid; gap: var(--space-4); }
.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: var(--space-3);
  align-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
}
.project-card img {
  border-radius: var(--radius-sm);
  transition: transform .8s var(--ease);
  aspect-ratio: 16/11;
  object-fit: cover;
  width: 100%;
}
.project-card:hover img { transform: scale(1.045); }
.project-card h3 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.01em; }
.project-card .eyebrow { margin-bottom: .3rem; }
@media (max-width: 760px) {
  .project-card, .project-card:nth-child(even) { grid-template-columns: 1fr !important; }
  .project-card:nth-child(even) img { order: 0 !important; }
}

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions-page .hero h1 { font-family: var(--font-display); font-weight: 600; }
.editorial-card { border-radius: var(--radius-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.editorial-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(15,23,36,.08); }
.editorial-card h3 { font-family: var(--font-display); }
.domain-label { font-family: var(--font-mono); letter-spacing: .1em; }
.domain-copy h3 { font-family: var(--font-display); }
.metric span { font-family: var(--font-mono); }
.solutions-cta h2 { font-family: var(--font-display); }

/* ============================================================
   SOLUTIONS — niche orbit + tech stack sweep
   ============================================================ */

/* --- Industry orbit: two counter-rotating rings around a core hub --- */
.orbit-section .niche-orbit-frame {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1;
  margin: var(--space-4) auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(7, 16, 24, .14);
}

.niche-orbit-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.niche-orbit-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(7,16,24,.25) 0%, rgba(7,16,24,.62) 72%, rgba(7,16,24,.82) 100%);
}
.niche-orbit-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: niche-bg-drift 26s ease-in-out infinite alternate;
}
@keyframes niche-bg-drift {
  0%   { transform: scale(1.08) translate(-1.5%, -1%); }
  100% { transform: scale(1.22) translate(1.5%, 1.5%); }
}

.orbit-section .niche-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .niche-orbit-bg img { animation: none; }
}

.niche-orbit-core {
  position: relative;
  z-index: 5;
  width: clamp(104px, 14vw, 140px);
  height: clamp(104px, 14vw, 140px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 30px 60px rgba(24, 91, 159, .35);
}
.niche-orbit-core span {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(.82rem, 1.1vw, .98rem);
}
.niche-orbit-core small {
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

.niche-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  animation: niche-spin var(--ring-duration, 80s) linear infinite;
  animation-play-state: paused;
}
.niche-orbit.is-spinning .niche-ring { animation-play-state: running; }
.niche-orbit:hover .niche-ring { animation-play-state: paused; }

.niche-ring--b[data-reverse] { animation-direction: reverse; }

.niche-orbit-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: rotate(var(--angle)) translateX(var(--radius, 165px)) rotate(calc(-1 * var(--angle)));
}
.niche-ring--b .niche-orbit-item { --radius: 265px; }

.niche-chip {
  display: inline-block;
  transform: translate(-50%, -50%);
  animation: niche-spin var(--ring-duration, 80s) linear infinite reverse;
  animation-play-state: paused;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(7, 16, 24, .1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.niche-orbit.is-spinning .niche-chip { animation-play-state: running; }
.niche-ring--b[data-reverse] .niche-chip { animation-direction: normal; }
.niche-chip:hover {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: var(--brand-primary);
  box-shadow: 0 16px 34px rgba(24, 91, 159, .22);
  z-index: 6;
}

@keyframes niche-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .orbit-section .niche-orbit-frame { max-width: 340px; }
  .niche-orbit-item { --radius: 108px !important; }
  .niche-ring--b .niche-orbit-item { --radius: 168px !important; }
  .niche-chip { font-size: .64rem; padding: .42rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .niche-ring, .niche-chip { animation: none !important; }
}

/* --- Tech stack: grouped chips with scroll reveal + light sweep --- */
.tech-stack-section .tech-grid {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.tech-grid::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -40%;
  width: 55%;
  height: 160%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.14) 45%, rgba(120,180,255,.24) 52%, transparent 100%);
  transform: skewX(-18deg);
  animation: tech-sweep 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tech-sweep {
  0%   { left: -45%; opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  72%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

.tech-group-label {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-signal);
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tech-chip {
  padding: .48rem .9rem;
  border-radius: .5rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .01em;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  transition-delay: calc(var(--i, 0) * 32ms);
}
.tech-grid.is-in .tech-chip {
  opacity: 1;
  transform: translateY(0);
}
.tech-chip:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 10px 22px rgba(24, 91, 159, .18);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .tech-grid::after { animation: none; display: none; }
  .tech-chip { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   CTA bands sitewide
   ============================================================ */
.cta-band { border-radius: var(--radius-md); }
/* ============================================================
   ABOUT PAGE — flagship rebuild
   Story: WHO → WHAT WE BELIEVE → WHAT WE DO → WHERE → WHO BUILDS
   IT → WHY → HOW TO START. Reuses the coordinate/mono-label
   motif and .reveal system already established sitewide.
   ============================================================ */

/* ---------- hero ---------- */
.about-hero {
  position: relative;
  isolation: isolate;
  padding: 9rem 0 0.25rem;
  overflow: hidden;
  min-height: 0;
  display: grid;
  align-items: end;
  background:
    radial-gradient(980px 520px at 82% 12%, rgba(11,102,255,.3), transparent 58%),
    radial-gradient(720px 460px at 10% 94%, rgba(217,43,43,.15), transparent 56%),
    linear-gradient(160deg, #050d18 0%, #061b35 52%, #0b3a66 100%);
}
.about-hero-grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 10%, #000 30%, transparent 78%);
}
.about-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(300px, .8fr);
  gap: clamp(1.5rem, 3.2vw, 3.2rem);
  align-items: center;
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  min-height: clamp(380px, 40vw, 520px);
  padding-top: .6rem;
}

.about-page .section,
.about-page [data-ax-connector-root],
.about-page section {
  scroll-margin-top: 110px;
}
.about-hero-copy { max-width: 660px; }
.ah-eyebrow { color: rgba(247,251,255,.7); opacity: 0; animation: geoIn .6s var(--ease) .05s forwards; }
.ah-eyebrow::before { background: var(--brand-signal); }

.ah-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.9rem, 5.2vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.045em;
  color: #fff;
  margin: .9rem 0 1rem;
  text-shadow: 0 12px 40px rgba(11,22,38,.42);
}
.ah-line { display: block; overflow: hidden; }
.ah-line > span {
  display: block;
  transform: translateY(110%);
  animation: ahLineIn .85s var(--ease) forwards;
}
.ah-line:nth-child(1) > span { animation-delay: .12s; }
.ah-line:nth-child(2) > span { animation-delay: .24s; }
.ah-line-accent > span {
  background: linear-gradient(100deg, #fff 20%, #bcd6ff 55%, #fff 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation-delay: .36s;
}
@keyframes ahLineIn { to { transform: translateY(0); } }

.ah-lead {
  font-size: clamp(.98rem, 1.12vw, 1.08rem);
  line-height: 1.48;
  max-width: 520px;
  color: rgba(232,240,248,.82);
  opacity: 0;
  animation: heroLineIn .8s var(--ease) .5s forwards;
}
.ah-company-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .48rem;
  margin-top: 1.05rem;
  opacity: 0;
  animation: heroLineIn .8s var(--ease) .62s forwards;
}
.ah-company-facts span {
  min-height: 0;
  padding: .48rem .68rem;
  border: 1px solid rgba(197,214,231,.16);
  border-radius: 999px;
  background: rgba(247,251,255,.07);
  color: rgba(232,240,248,.78);
  font-family: var(--font-mono);
  font-size: .63rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.about-hero-visual {
  position: relative;
  margin-top: 0;
  height: clamp(320px, 32vw, 480px);
  border-radius: 22px;
  border: 1px solid rgba(197,214,231,.18);
  box-shadow: 0 32px 80px rgba(1,8,18,.46);
  opacity: 0;
  animation: heroPanelIn 1s var(--ease) .45s forwards;
  transform: perspective(1200px) rotateY(-8deg) rotateX(2deg);
}
.about-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) brightness(.82); }
.about-hero-visual::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid rgba(198,220,255,.18);
  border-radius: 16px;
  pointer-events: none;
  z-index: 2;
}
.about-hero-visual::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(6,15,28,.82) 0%, rgba(6,15,28,.20) 52%, rgba(6,15,28,.06) 100%),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  opacity: .94;
}
.ah-visual-tag {
  position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 4;
  background: rgba(6,15,28,.55);
  backdrop-filter: blur(6px);
  padding: .44rem .75rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.16);
}
.ah-trust-strip {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-bottom: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .ah-line > span, .ah-lead, .ah-company-facts, .about-hero-visual { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 980px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: 2rem;
  }
  .about-hero-visual {
    height: clamp(260px, 48vw, 390px);
    max-width: 680px;
  }
}
@media (max-width: 760px) {
  .about-hero {
    min-height: auto;
    padding-top: 7.2rem;
  }
  .ah-heading { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .about-hero-visual { height: 260px; }
}

.about-page .ax-story,
.about-page .ax-profile,
.about-page .ax-locations,
.about-page .ax-team {
  padding-top: 3.25rem;
}

/* ============================================================
   COHESION PASS — Home / Work / Careers
   Scoped polish that brings older pages into the Services/Solutions
   visual language without touching those benchmark pages.
   ============================================================ */

.home-page .section,
.work-page .section,
.careers-page .section {
  position: relative;
}

.home-page .section-header h2,
.work-page .section-header h2,
.careers-page .section-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.025em;
}

.home-page .hero {
  min-height: clamp(600px, 84vh, 820px);
  padding-top: clamp(7rem, 10vw, 9.5rem);
}

.home-page .hero-copy .eyebrow {
  color: rgba(247,251,255,.76);
}

.home-page .hero h1 {
  max-width: 820px;
}

.home-page .spatial-visual {
  border-radius: 0;
  border: 1px solid rgba(197,214,231,.18);
  transform: translateZ(0);
}

.home-page .spatial-visual::after,
.work-page .image-panel::after,
.careers-page .image-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mix-blend-mode: screen;
  opacity: .22;
}

.service-quick-grid {
  align-items: stretch;
}

.service-card-link {
  color: inherit;
  text-decoration: none;
}

.service-pill-panel,
.mini-value {
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,253,.92)),
    var(--surface);
}

.service-pill-panel {
  border-radius: var(--radius-sm);
  padding: clamp(1.15rem, 2vw, 1.55rem);
}

.service-pill-panel h3,
.mini-value h3 {
  font-family: var(--font-display);
  font-weight: 600;
}

.mini-value {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(1.2rem, 2.3vw, 1.8rem);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.mini-value:hover {
  transform: translateY(-4px);
  border-color: rgba(11,102,255,.26);
  box-shadow: 0 22px 48px rgba(15,23,36,.08);
}

.mini-number {
  font-family: var(--font-mono);
  color: var(--brand-signal);
  letter-spacing: .1em;
  display: inline-block;
  margin-bottom: .8rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.feature-card {
  position: relative;
  min-height: clamp(300px, 38vw, 520px);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #081522;
  color: #fff;
  box-shadow: 0 28px 70px rgba(7,16,24,.16);
}

.feature-card:first-child {
  grid-row: span 2;
}

.feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) brightness(.82);
  transition: transform .85s var(--ease), filter .45s var(--ease);
}

.feature-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) brightness(.92);
}

.feature-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: linear-gradient(0deg, rgba(5,13,24,.9), rgba(5,13,24,.38) 68%, transparent);
}

.feature-meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247,251,255,.72);
}

.feature-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
  margin: .4rem 0 .4rem;
}

.feature-copy p {
  max-width: 38ch;
  color: rgba(232,240,248,.82);
  margin: 0;
}

.work-page .hero .image-panel,
.careers-page .hero .image-panel {
  position: relative;
  border-radius: 0;
  border: 1px solid rgba(197,214,231,.18);
  overflow: hidden;
}

.work-page .project-list {
  gap: clamp(2.2rem, 5vw, 5rem);
}

.work-page .project-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.work-page .project-card img {
  box-shadow: 0 28px 70px rgba(7,16,24,.13);
}

.work-page .project-card h3 {
  font-size: clamp(1.9rem, 3.8vw, 4rem);
  line-height: .96;
}

.work-page .project-card div {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.careers-page .jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.careers-page .grid-3 .panel,
.careers-page .job-listing,
.careers-page .empty-state {
  border-radius: var(--radius-sm);
  border-color: rgba(15,23,36,.12);
}

.careers-page .job-listing {
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.careers-page .job-listing h3 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.05;
}

.footer {
  position: relative;
  overflow: hidden;
}

.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 74%);
  opacity: .45;
}

.footer .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   GLOBAL PREMIUM HEADER SYSTEM
   Two-state design: transparent at top → floating on scroll
   Signature micro-interactions and smooth transitions
   ============================================================ */

/* --------- HEADER ENTRY ANIMATION --------- */
@keyframes headerIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------- BRAND / LOGO SYSTEM --------- */
.brand {
  perspective: 1200px;
  transition: all .35s cubic-bezier(0.16, 0.84, 0.28, 1);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  display: block;
  transition: all .35s cubic-bezier(0.16, 0.84, 0.28, 1);
  filter: drop-shadow(0 2px 8px rgba(11, 102, 255, 0.12));
  transform-style: preserve-3d;
}

/* Logo entrance animation */
.brand img {
  animation: logoFloatIn .6s cubic-bezier(0.16, 0.84, 0.28, 1) 0.08s both;
}

@keyframes logoFloatIn {
  0% {
    opacity: 0;
    transform: translateY(-16px) rotateX(-40deg) rotateZ(170deg) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);
  }
}

/* Logo hover interaction */
.brand:hover img {
  filter: drop-shadow(0 8px 24px rgba(11, 102, 255, 0.28));
  transform: rotateX(6deg) rotateY(-10deg) rotateZ(-2deg) scale(1.06);
}

/* Smooth logo scale on scroll transition */
.site-header.is-scrolled .brand img {
  animation: none;
}

/* Mobile logo hover adjustment */
@media (max-width: 768px) {
  .brand:hover img {
    transform: rotateX(3deg) rotateY(-6deg) rotateZ(-1deg) scale(1.04);
  }
}

/* --------- NAVIGATION ITEMS --------- */
.site-nav a {
  position: relative;
  overflow: hidden;
}

/* Animated active indicator (bottom underline) */
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0.72rem;
  right: 0.72rem;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.site-nav a.active::after {
  transform: scaleX(1);
}

.site-nav a:hover {
  color: var(--brand-primary-deep);
}

/* Smooth color transition */
.site-nav a {
  transition: all .24s cubic-bezier(0.16, 0.84, 0.28, 1);
}

/* --------- CTA BUTTON --------- */
.site-nav .nav-cta {
  position: relative;
  box-shadow: 0 4px 12px rgba(11, 102, 255, 0.18);
  transition: all .28s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.site-nav .nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 102, 255, 0.32);
}

.site-nav .nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(11, 102, 255, 0.2);
}

/* --------- HEADER STATE TRANSITIONS --------- */
/* Smooth material transition when scrolling */
.site-header {
  --header-bg: transparent;
  --header-blur: 0px;
  --header-shadow: 0 0px 0px rgba(7, 16, 24, 0);
  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur));
}

.site-header.is-scrolled {
  --header-bg: rgba(251, 252, 253, 0.96);
  --header-blur: 12px;
  --header-shadow: 0 2px 12px rgba(7, 16, 24, 0.08), 0 10px 28px rgba(7, 16, 24, 0.06);
}

/* --------- ACCESSIBILITY --------- */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.is-scrolled,
  .brand img,
  .brand:hover img,
  .site-nav a,
  .site-nav a::after,
  .site-nav .nav-cta {
    animation: none !important;
    transition: opacity .2s ease !important;
  }
  
  .brand:hover img {
    transform: scale(1.02) !important;
  }
}
    min-height: 300px;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .home-page .hero {
    min-height: auto;
    padding-top: 6.4rem;
  }

  .work-page .project-card h3 {
    font-size: clamp(1.75rem, 12vw, 3rem);
  }
}

/* ---------- story ---------- */
.about-story-section .story-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
.story-visual { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.story-visual img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform .9s var(--ease); }
.story-visual:hover img { transform: scale(1.04); }
.story-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2vw + .8rem, 2.1rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.story-detail { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 560px; }
@media (max-width: 860px) {
  .about-story-section .story-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .story-visual img { aspect-ratio: 16/10; }
}

/* ---------- values as editorial rows ---------- */
.value-rows { display: flex; flex-direction: column; margin-top: var(--space-4); }
.value-row {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr) minmax(0,1.4fr);
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.value-row:last-child { border-bottom: 1px solid var(--line); }
.value-row .mini-number { font-size: 1rem; margin-bottom: 0; }
.value-row h3 { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.01em; }
.value-row p { color: var(--muted); margin: 0; max-width: 44ch; }
@media (max-width: 700px) {
  .value-row { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------- locations: Hyderabad ↔ Bapatla ---------- */
.locations-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(15,23,36,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,36,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 40px 40px, 40px 40px, auto;
}
.location-node { position: relative; text-align: center; }
.location-node .location-marker {
  display: block; width: 12px; height: 12px; margin: 0 auto .9rem;
  border-radius: 50%; background: var(--brand-primary);
  box-shadow: 0 0 0 6px rgba(11,102,255,.14);
}
.location-node[data-loc="bapatla"] .location-marker { background: var(--brand-signal); box-shadow: 0 0 0 6px rgba(217,43,43,.14); }
.location-code {
  display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  color: var(--muted); margin-bottom: .35rem;
}
.location-node h3 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.01em; margin-bottom: .5rem; }
.location-node p { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 0; }

.location-connector { position: relative; width: clamp(64px, 12vw, 160px); height: 2px; }
.lc-line {
  position: absolute; inset: 0; background: var(--line-strong);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1.1s var(--ease);
}
.locations-map.is-visible .lc-line { transform: scaleX(1); }
.lc-dot { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); }
.lc-dot-start { left: 0; background: var(--brand-primary); }
.lc-dot-end { left: 100%; background: var(--brand-signal); }

@media (max-width: 760px) {
  .locations-map { grid-template-columns: 1fr; padding: var(--space-3); }
  .location-connector { width: 2px; height: 48px; margin: 0 auto; }
  .lc-line { transform-origin: top center; }
  .lc-dot-end { left: 50%; top: 100%; }
  .lc-dot-start { left: 50%; top: 0; }
}

/* ---------- team ---------- */
.team-grid-premium { margin-top: var(--space-4); gap: 1.5rem; }
.team-grid-premium .team-card {
  border-top: none;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.team-grid-premium .team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(15,23,36,.1);
  border-color: rgba(11,102,255,.28);
}
.team-grid-premium .team-card .team-avatar {
  width: 100%; height: auto; aspect-ratio: 4/5;
  min-width: 0; min-height: 0;
  border: 0; border-radius: 0;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.team-grid-premium .team-card:hover .team-avatar { transform: scale(1.05); }
.team-grid-premium .team-card .team-info { padding: 1.1rem 1.25rem 1.4rem; gap: .3rem; }
.team-grid-premium .team-card h3 { font-family: var(--font-display); font-size: 1.15rem; }
@media (max-width: 700px) {
  .team-grid-premium { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .team-grid-premium { grid-template-columns: 1fr; }
}

/* ---------- final CTA ---------- */
.about-final-cta {
  background: linear-gradient(160deg, #050d18 0%, #0a3a66 62%, #0f2b4a 100%);
  padding: var(--space-6) 0;
  position: relative;
  overflow: hidden;
}
.about-final-cta-inner { position: relative; z-index: 1; max-width: 760px; }
.about-final-cta .eyebrow { color: rgba(247,251,255,.7); }
.about-final-cta .eyebrow::before { background: var(--brand-signal); }
.about-final-cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #fff;
  margin: 1rem 0 1.1rem;
}
.afc-lead { color: rgba(232,240,248,.82); font-size: 1.05rem; line-height: 1.6; max-width: 520px; margin-bottom: var(--space-3); }
.about-final-cta .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.about-final-cta .btn:not(.btn-primary) { color: rgba(232,240,248,.9); border-color: rgba(255,255,255,.24); }
.about-final-cta .btn:not(.btn-primary):hover { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .lc-line { transition: none; transform: scaleX(1); }
}

/* ============================================================
   TECH STACK SECTION — ANIMATED FULL BACKGROUND
   ============================================================ */
.tech-stack-section {
  position: relative;
  background: #ffffff;
  padding: var(--space-6) 0;
  overflow: hidden;
}

.tech-stack-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.015) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}

.tech-stack-section .container {
  position: relative;
  z-index: 1;
  width: min(100%, 1500px);
  padding-inline: .7rem;
}

.tech-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.tech-header .eyebrow {
  margin-bottom: .5rem;
  color: rgba(15,23,42,.62);
}

.tech-header h2 {
  font-size: clamp(2rem, 3vw, 3.2rem);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}

.tech-stack-section .lead {
  display: none;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(110px, 1fr));
  gap: .72rem .8rem;
  margin-top: var(--space-4);
  width: 100%;
}

.tech-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.2rem;
  padding: .72rem .68rem .85rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.09);
  border-color: rgba(11, 102, 255, 0.18);
}

.tech-badge {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.45rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #fff;
  background: #0d1d32;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  margin: 0 auto .7rem;
}

.tech-badge--react { background: linear-gradient(135deg, #0d233a, #163d5d); color: #47d7ff; }
.tech-badge--node { background: linear-gradient(135deg, #102d22, #1b4639); color: #2dd4bf; }
.tech-badge--js { background: linear-gradient(135deg, #332500, #4d3d00); color: #facc15; }
.tech-badge--next { background: linear-gradient(135deg, #22272f, #374151); color: #f8fafc; }
.tech-badge--ts { background: linear-gradient(135deg, #11243c, #183c63); color: #7dd3fc; }
.tech-badge--vue { background: linear-gradient(135deg, #0d2d23, #164e3d); color: #34d399; }
.tech-badge--angular { background: linear-gradient(135deg, #3c1013, #5a1f2a); color: #fca5a5; }
.tech-badge--java { background: linear-gradient(135deg, #2a1c0d, #4a2d0f); color: #fbbf24; }
.tech-badge--python { background: linear-gradient(135deg, #273111, #3d4b18); color: #eab308; }
.tech-badge--flutter { background: linear-gradient(135deg, #102a39, #123d5a); color: #67e8f9; }
.tech-badge--mongo { background: linear-gradient(135deg, #0d2a1d, #124b34); color: #4ade80; }
.tech-badge--ruby { background: linear-gradient(135deg, #3d121a, #5b1b25); color: #fca5a5; }
.tech-badge--postgres { background: linear-gradient(135deg, #11263d, #183d66); color: #93c5fd; }
.tech-badge--mysql { background: linear-gradient(135deg, #1f243d, #2d3a68); color: #c4b5fd; }
.tech-badge--aws { background: linear-gradient(135deg, #3d2a10, #6a3b00); color: #fbbf24; }
.tech-badge--docker { background: linear-gradient(135deg, #10233d, #123d5c); color: #7dd3fc; }
.tech-badge--shopify { background: linear-gradient(135deg, #0f2d1d, #0f5634); color: #86efac; }
.tech-badge--wp { background: linear-gradient(135deg, #10223a, #183d63); color: #bfdbfe; }
.tech-badge--qgis { background: linear-gradient(135deg, #123723, #1d6038); color: #86efac; }
.tech-badge--arcgis { background: linear-gradient(135deg, #3a1d0b, #6b310d); color: #fbbf24; }
.tech-badge--adwords { background: linear-gradient(135deg, #0f213e, #1c3f66); color: #60a5fa; }
.tech-badge--meta { background: linear-gradient(135deg, #281f3d, #3d2d61); color: #c4b5fd; }
.tech-badge--analytics { background: linear-gradient(135deg, #142b2b, #1c4348); color: #34d399; }
.tech-badge--mailchimp { background: linear-gradient(135deg, #3a2d11, #725014); color: #fbbf24; }
.tech-badge--excel { background: linear-gradient(135deg, #123728, #1e5b3a); color: #86efac; }
.tech-badge--sheets { background: linear-gradient(135deg, #102b52, #214d7c); color: #93c5fd; }
.tech-badge--powerbi { background: linear-gradient(135deg, #2b1028, #602a4b); color: #f9a8d4; }
.tech-badge--ocr { background: linear-gradient(135deg, #1c2435, #323f52); color: #e2e8f0; }

.tech-card h3 {
  margin: 0 0 .7rem;
  text-align: center;
  font-size: .9rem;
  color: var(--ink);
  letter-spacing: -.03em;
  font-weight: 600;
}

.tech-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .4rem;
  color: rgba(15,23,42,.68);
  font-size: .54rem;
  letter-spacing: .09em;
  font-weight: 700;
}

.tech-metric strong {
  font-size: .58rem;
  color: var(--ink);
  letter-spacing: .08em;
}

.tech-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.tech-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.tech-fill--cyan { background: linear-gradient(90deg, #0ea5e9, #22d3ee); }
.tech-fill--green { background: linear-gradient(90deg, #22c55e, #4ade80); }
.tech-fill--gold { background: linear-gradient(90deg, #facc15, #fbbf24); }
.tech-fill--silver { background: linear-gradient(90deg, #cbd5e1, #e2e8f0); }
.tech-fill--blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.tech-fill--blue-2 { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.tech-fill--blue-3 { background: linear-gradient(90deg, #2563eb, #93c5fd); }
.tech-fill--green-2 { background: linear-gradient(90deg, #10b981, #34d399); }
.tech-fill--green-3 { background: linear-gradient(90deg, #22c55e, #86efac); }
.tech-fill--green-4 { background: linear-gradient(90deg, #16a34a, #4ade80); }
.tech-fill--green-5 { background: linear-gradient(90deg, #15803d, #4ade80); }
.tech-fill--red { background: linear-gradient(90deg, #ef4444, #f87171); }
.tech-fill--orange { background: linear-gradient(90deg, #f97316, #fb923c); }
.tech-fill--orange-2 { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.tech-fill--orange-3 { background: linear-gradient(90deg, #ea580c, #fbbf24); }
.tech-fill--yellow { background: linear-gradient(90deg, #eab308, #facc15); }
.tech-fill--amber { background: linear-gradient(90deg, #d97706, #fbbf24); }
.tech-fill--sky { background: linear-gradient(90deg, #0284c7, #7dd3fc); }
.tech-fill--google { background: linear-gradient(90deg, #2563eb, #22c55e); }
.tech-fill--meta { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.tech-fill--analytics { background: linear-gradient(90deg, #0f766e, #2dd4bf); }
.tech-fill--mailchimp { background: linear-gradient(90deg, #d97706, #fbbf24); }
.tech-fill--excel { background: linear-gradient(90deg, #15803d, #4ade80); }
.tech-fill--sheets { background: linear-gradient(90deg, #2563eb, #93c5fd); }
.tech-fill--powerbi { background: linear-gradient(90deg, #a21caf, #f9a8d4); }
.tech-fill--ocr { background: linear-gradient(90deg, #475569, #94a3b8); }
.tech-fill--html { background: linear-gradient(90deg, #e34f26, #fb923c); }
.tech-fill--css { background: linear-gradient(90deg, #1572b6, #60a5fa); }

@media (max-width: 1400px) {
  .tech-grid {
    grid-template-columns: repeat(7, minmax(110px, 1fr));
  }
}

@media (max-width: 1200px) {
  .tech-grid {
    grid-template-columns: repeat(6, minmax(110px, 1fr));
  }
}

@media (max-width: 900px) {
  .tech-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

@media (max-width: 767px) {
  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .62rem;
  }

  .tech-card {
    padding: .62rem .42rem .7rem;
  }

  .tech-badge {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .tech-card h3 {
    font-size: .64rem;
    margin-bottom: .52rem;
  }

  .tech-metric span, .tech-metric strong {
    letter-spacing: .04em;
    font-size: .4rem;
  }
}

@media (max-width: 420px) {
  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
  }

  .tech-card {
    padding: .52rem .35rem .58rem;
  }

  .tech-metric {
    gap: .15rem;
  }
}

/* ============================================================
   MOBILE OPTIMIZATION — Hero & Image Panels
   ============================================================ */
.internal-page .hero .image-panel,
.internal-page .hero .spatial-visual {
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15,23,36,.12);
}

.internal-page .hero .image-panel img,
.internal-page .hero .spatial-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s var(--ease);
}

.internal-page .hero .image-panel:hover img {
  transform: scale(1.02);
}

/* ============================================================
   MOBILE: Tablet & Large Phones (768px - 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .tech-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
  }

  .tech-group {
    padding: var(--space-3);
  }

  .internal-page .hero .image-panel,
  .internal-page .hero .spatial-visual {
    min-height: 240px;
  }
}

/* ============================================================
   MOBILE: Medium Phones (640px - 767px)
   ============================================================ */
@media (max-width: 767px) {
  .tech-stack-section {
    padding: var(--space-4) 0;
  }

  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .62rem;
  }

  .tech-group {
    padding: var(--space-3);
  }

  .tech-chips {
    gap: .5rem;
  }

  .tech-chip {
    padding: .4rem .6rem;
    font-size: .78rem;
  }

  .internal-page .hero-grid {
    gap: 1.4rem;
  }

  .internal-page .hero .image-panel,
  .internal-page .hero .spatial-visual {
    min-height: 240px;
    max-height: 300px;
    border-radius: 10px;
  }

  .internal-page .hero-copy {
    text-align: left;
    align-self: start;
  }

  .internal-page h1 {
    font-size: clamp(2rem, 7vw, 2.8rem);
    line-height: .95;
    letter-spacing: -.02em;
  }

  .internal-page .hero .lead {
    font-size: clamp(.95rem, 2.2vw, 1.1rem);
    line-height: 1.45;
  }
}

/* ============================================================
   MOBILE: Small Phones (max 639px)
   ============================================================ */
@media (max-width: 639px) {
  .tech-stack-section {
    padding: var(--space-4) 0;
  }

  .tech-stack-section .section-header {
    text-align: center;
  }

  .tech-stack-section .section-header h2 {
    font-size: clamp(1.5rem, 5vw, 1.8rem);
  }

  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
  }

  .tech-group {
    padding: var(--space-2);
  }

  .tech-group-label {
    font-size: .65rem;
    margin-bottom: var(--space-2);
  }

  .tech-chips {
    gap: .4rem;
  }

  .tech-chip {
    padding: .36rem .52rem;
    font-size: .73rem;
    letter-spacing: -.0025em;
  }

  .internal-page .hero-grid {
    gap: 1rem;
  }

  .internal-page .hero .image-panel,
  .internal-page .hero .spatial-visual {
    min-height: 200px;
    max-height: 260px;
    border-radius: 8px;
  }

  .internal-page h1 {
    font-size: clamp(1.6rem, 6.5vw, 2.3rem);
    line-height: .98;
    letter-spacing: -.015em;
    margin-bottom: .6rem;
  }

  .internal-page .hero .eyebrow {
    margin-bottom: .5rem;
    font-size: .65rem;
  }

  .internal-page .hero .lead {
    font-size: .9rem;
    line-height: 1.48;
    max-width: 100%;
  }
}


/* ============================================================
   PREMIUM VISUAL ECOSYSTEM (TRISET FLAGSHIP SECTION)
   ============================================================ */
.pe-section {
  position: relative;
  padding: 6rem 0 8rem;
  background: var(--surface);
  overflow: hidden;
}

.pe-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 10;
}

.pe-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0.5rem 0 1rem;
}

.pe-header .pe-lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

.pe-canvas {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 75vh;
  min-height: 600px;
  max-height: 900px;
  margin: 0 auto;
  background: radial-gradient(circle at center, rgba(11, 102, 255, 0.03) 0%, transparent 60%);
}

/* Base Hover Group Rule: Dim non-hovered elements */
.pe-canvas:hover .pe-zone {
  opacity: 0.35;
  filter: grayscale(40%);
}

.pe-canvas:hover .pe-connections {
  opacity: 0.2;
}

/* --- THE ZONES --- */
.pe-zone {
  position: absolute;
  width: 45%;
  height: 55%;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: crosshair;
}

/* Zone Placements */
.pe-zone-geo     { top: 0; left: 5%; }
.pe-zone-digital { top: 0; right: 5%; }
.pe-zone-data    { bottom: 0; left: 10%; width: 40%; height: 50%; }
.pe-zone-creative{ bottom: 0; right: 10%; width: 40%; height: 50%; }

/* Image Masking Magic */
.pe-zone-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  /* Beautifully blends rectangular images into soft organic blobs */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 70%);
  transition: all 0.6s var(--ease);
  z-index: 1;
}

/* Zone Content */
.pe-zone-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem;
  pointer-events: none; /* Let hover trigger on the whole zone */
  transform: scale(0.95);
  transition: all 0.4s var(--ease);
}

.pe-zone-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--brand-primary);
  text-transform: uppercase;
  background: rgba(255,255,255,0.8);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

.pe-zone-content h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--ink);
  margin: 0.5rem 0;
  text-shadow: 0 4px 12px rgba(255,255,255,0.9);
}

.pe-zone-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s var(--ease);
}

.pe-zone-list li { margin-bottom: 0.3rem; }

/* Active Hover State per Zone */
.pe-canvas .pe-zone:hover {
  opacity: 1;
  filter: grayscale(0%);
  z-index: 10;
}

.pe-zone:hover .pe-zone-image {
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 75%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 75%);
}

.pe-zone:hover .pe-zone-content {
  transform: scale(1);
}

.pe-zone:hover .pe-zone-list {
  opacity: 1;
  transform: translateY(0);
}

/* --- CENTRAL CORE --- */
.pe-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.pe-core-globe {
  width: 60px;
  height: 60px;
  background: var(--surface);
  border: 2px solid var(--brand-primary);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(11, 102, 255, 0.2);
  z-index: 3;
}

.pe-core-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(11, 102, 255, 0.15);
}

.pe-core-ring.r1 {
  width: 120px; height: 120px;
  animation: coreSpin 12s linear infinite;
  border-left-color: var(--brand-primary);
}

.pe-core-ring.r2 {
  width: 160px; height: 160px;
  animation: coreSpin 18s linear infinite reverse;
  border-right-color: var(--brand-signal);
}

.pe-core-label {
  position: absolute;
  bottom: -30px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* --- CONNECTIONS & DATA FLOW --- */
.pe-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

.pe-line {
  fill: none;
  stroke: rgba(15, 23, 36, 0.06);
  stroke-width: 0.2;
}

.pe-particle {
  offset-rotate: auto;
  animation: dataFlow 4s linear infinite;
}
.p1 { offset-path: path("M 25 35 Q 50 50 50 50"); animation-delay: 0s; }
.p2 { offset-path: path("M 75 35 Q 50 50 50 50"); animation-delay: 1s; animation-direction: reverse; }
.p3 { offset-path: path("M 30 75 Q 50 50 50 50"); animation-delay: 2s; }
.p4 { offset-path: path("M 70 75 Q 50 50 50 50"); animation-delay: 3s; animation-direction: reverse;}

@keyframes coreSpin {
  100% { transform: rotate(360deg); }
}

@keyframes dataFlow {
  0%   { offset-distance: 0%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- RESPONSIVE BEHAVIOR --- */
@media (max-width: 1024px) {
  .pe-canvas {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  
  .pe-connections, .pe-core { display: none; }
  
  .pe-zone {
    position: relative;
    width: 90%;
    height: 350px;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .pe-zone-image {
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
  }

  .pe-zone-list {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   TRISET RADIAL ECOSYSTEM (REPLACES HDSENSE-STYLE PIE CHART)
   ============================================================ */

.triset-radial-section {
  position: relative;
  padding: 6rem 0 8rem;
  background: radial-gradient(circle at 50% 50%, rgba(11, 102, 255, 0.03) 0%, var(--paper) 70%);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.radial-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem;
  position: relative;
  z-index: 10;
}

.radial-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-signal);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.radial-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.radial-lead {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
}

/* --- WORKSPACE & GRID --- */
.radial-workspace {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 600px;
}

/* Background SVG connecting lines */
.radial-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.radial-line {
  fill: none;
  stroke: rgba(11, 102, 255, 0.15);
  stroke-width: 2px;
  stroke-dasharray: 6 6;
  animation: lineFlow 30s linear infinite;
}

.radial-particle {
  fill: var(--brand-primary);
  filter: drop-shadow(0 0 6px rgba(11,102,255,0.8));
  offset-rotate: auto;
  animation: particleFlow 4s linear infinite;
}

.p-tl { offset-path: path("M 500 400 L 250 200"); animation-delay: 0s; }
.p-tr { offset-path: path("M 500 400 L 750 200"); animation-delay: 1.5s; }
.p-bl { offset-path: path("M 500 400 L 250 600"); animation-delay: 0.7s; }
.p-br { offset-path: path("M 500 400 L 750 600"); animation-delay: 2.2s; }

/* The 3x3 layout grid for perfect alignment */
.radial-grid {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 200px 1fr;
  gap: 1rem;
  align-items: center;
  position: relative;
  z-index: 5;
  height: 100%;
}

/* --- CENTRAL HUB --- */
.radial-hub {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}

.ring-outer {
  width: 180px;
  height: 180px;
  border-top-color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  opacity: 0.3;
  animation: spinRight 16s linear infinite;
}

.ring-inner {
  width: 140px;
  height: 140px;
  border-left-color: var(--brand-signal);
  border-right-color: var(--brand-signal);
  opacity: 0.4;
  animation: spinLeft 12s linear infinite;
}

.hub-core {
  position: relative;
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 36px rgba(11, 102, 255, 0.3);
  z-index: 10;
  border: 4px solid var(--surface);
  transition: transform 0.4s var(--ease);
}

.hub-core:hover {
  transform: scale(1.05);
}

.hub-core img {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
}

.hub-core strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

/* --- NODES (The 4 Categories) --- */
.radial-node {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  transition: transform 0.3s var(--ease);
}

.radial-node:hover {
  transform: translateY(-4px);
}

.node-tl { grid-column: 1; grid-row: 1; justify-self: end; }
.node-tr { grid-column: 3; grid-row: 1; justify-self: start; }
.node-bl { grid-column: 1; grid-row: 3; justify-self: end; }
.node-br { grid-column: 3; grid-row: 3; justify-self: start; }

.node-icon-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(7, 16, 24, 0.08);
  border: 1px solid var(--line);
  z-index: 5;
  flex-shrink: 0;
}

.node-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(11, 102, 255, 0.2);
  transition: all 0.3s var(--ease);
}

.radial-node:hover .node-icon-wrap::before {
  inset: -2px;
  border-color: var(--brand-primary);
  background: rgba(11, 102, 255, 0.05);
}

.node-icon {
  font-size: 1.8rem;
}

.node-content {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(7, 16, 24, 0.04);
  max-width: 320px;
}

.text-right { text-align: right; }
.text-left { text-align: left; }

.node-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--brand-signal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.node-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.node-content p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* --- ANIMATIONS --- */
@keyframes spinRight { 100% { transform: rotate(360deg); } }
@keyframes spinLeft { 100% { transform: rotate(-360deg); } }
@keyframes lineFlow { 100% { stroke-dashoffset: -200; } }
@keyframes particleFlow {
  0%   { offset-distance: 0%; opacity: 0; }
  20%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1.5); }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- RESPONSIVE MOBILE STACK --- */
@media (max-width: 980px) {
  .radial-svg-lines { display: none; } /* Hide lines on mobile */
  
  .radial-workspace { min-height: auto; }
  
  .radial-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  /* Bring HUB to the top on mobile */
  .radial-hub {
    order: -1;
    margin-bottom: 2rem;
  }
  
  .radial-node {
    flex-direction: column;
    text-align: center;
    width: 100%;
    gap: 1rem;
  }
  
  /* Reset Desktop Alignments */
  .node-content {
    max-width: 100%;
    text-align: center !important;
  }
  
  /* Put icon on top of card for mobile */
  .radial-node .node-icon-wrap {
    order: -1;
  }
}

/* ---------- site-wide theme compatibility layer ---------- */
:root {
  color-scheme: light;
  --theme-panel: #ffffff;
  --theme-panel-soft: #f4f8fc;
  --theme-panel-glass: rgba(255, 255, 255, 0.86);
  --theme-text: var(--ink);
  --theme-muted: var(--muted);
  --theme-border: rgba(15, 23, 36, 0.12);
  --theme-input: #ffffff;
  --theme-input-text: #0f1724;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #f6f9fc;
  --ink-2: #e2edf8;
  --muted: #a9b8c8;
  --paper: #050b12;
  --surface: #0b1724;
  --surface-2: #0f2236;
  --line: rgba(232, 240, 248, 0.16);
  --grid-line: rgba(232, 240, 248, 0.07);
  --theme-panel: #0b1724;
  --theme-panel-soft: #0f2236;
  --theme-panel-glass: rgba(11, 23, 36, 0.88);
  --theme-text: #f6f9fc;
  --theme-muted: #a9b8c8;
  --theme-border: rgba(232, 240, 248, 0.16);
  --theme-input: #071523;
  --theme-input-text: #f6f9fc;
  --careers-bg: #050b12;
  --careers-surface: #0b1724;
  --careers-surface-soft: #0f2236;
  --careers-ink: #f6f9fc;
  --careers-muted: #a9b8c8;
  --careers-line: rgba(232, 240, 248, 0.16);
  --gradient-light: radial-gradient(circle at 18% 0%, rgba(11,102,255,.22), transparent 34%), radial-gradient(circle at 88% 10%, rgba(217,43,43,.12), transparent 24%), linear-gradient(180deg, #050b12 0%, #071523 100%);
}

:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] body {
  background: var(--paper) !important;
  color: var(--theme-text) !important;
}

:root[data-theme='dark'] body::before {
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(232, 240, 248, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 240, 248, 0.055) 1px, transparent 1px);
}

:root[data-theme='dark'] .site-header {
  background: rgba(5, 11, 18, 0.82) !important;
  border-bottom-color: rgba(232, 240, 248, 0.12) !important;
}

:root[data-theme='dark'] .site-header.is-scrolled,
:root[data-theme='dark'] body.nav-open .site-header {
  background: rgba(5, 11, 18, 0.94) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34) !important;
}

:root[data-theme='dark'] .site-nav a,
:root[data-theme='dark'] .theme-toggle,
:root[data-theme='dark'] .menu-toggle {
  color: rgba(246, 249, 252, 0.82) !important;
}

:root[data-theme='dark'] .site-nav a:hover,
:root[data-theme='dark'] .site-nav a.active,
:root[data-theme='dark'] .theme-toggle:hover,
:root[data-theme='dark'] .menu-toggle:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(232, 240, 248, 0.14) !important;
}

.theme-toggle {
  min-width: 92px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-color: var(--theme-border) !important;
  background: color-mix(in srgb, var(--theme-panel) 78%, transparent) !important;
}

.theme-toggle.mobile-theme-toggle {
  display: none !important;
}

.menu-toggle {
  display: none !important;
}

@media (max-width: 980px) {
  .site-nav .theme-toggle {
    display: none !important;
  }

  .theme-toggle.mobile-theme-toggle {
    display: inline-flex !important;
  }
}

:root[data-theme='dark'] .theme-toggle {
  background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme='dark'] .section,
:root[data-theme='dark'] .compact-section,
:root[data-theme='dark'] .contact-services-section,
:root[data-theme='dark'] .contact-main-section,
:root[data-theme='dark'] .contact-info-section,
:root[data-theme='dark'] .locations-premium-section,
:root[data-theme='dark'] .project-types-section,
:root[data-theme='dark'] .trust-section,
:root[data-theme='dark'] .careers-main,
:root[data-theme='dark'] .careers-section {
  background: var(--paper) !important;
  color: var(--theme-text) !important;
}

:root[data-theme='dark'] .brand-band,
:root[data-theme='dark'] .process-showcase {
  background:
    linear-gradient(90deg, rgba(232, 240, 248, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(232, 240, 248, 0.04) 1px, transparent 1px),
    var(--paper) !important;
  background-size: 42px 42px !important;
}

:root[data-theme='dark'] .panel,
:root[data-theme='dark'] .metric,
:root[data-theme='dark'] .contact-card,
:root[data-theme='dark'] .service-pill-panel,
:root[data-theme='dark'] .mini-value,
:root[data-theme='dark'] .project-card,
:root[data-theme='dark'] .featured-project,
:root[data-theme='dark'] .info-card,
:root[data-theme='dark'] .location-card-premium,
:root[data-theme='dark'] .project-type-card,
:root[data-theme='dark'] .trust-card,
:root[data-theme='dark'] .service-card,
:root[data-theme='dark'] .contact-form-panel,
:root[data-theme='dark'] .job-card,
:root[data-theme='dark'] .benefit-card,
:root[data-theme='dark'] .culture-card,
:root[data-theme='dark'] .team-card,
:root[data-theme='dark'] .node-content {
  background: var(--theme-panel) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.26) !important;
}

:root[data-theme='dark'] h1,
:root[data-theme='dark'] h2,
:root[data-theme='dark'] h3,
:root[data-theme='dark'] h4,
:root[data-theme='dark'] label,
:root[data-theme='dark'] .service-card-content h3,
:root[data-theme='dark'] .contact-editorial h2,
:root[data-theme='dark'] .contact-form-panel h3,
:root[data-theme='dark'] .info-card h3,
:root[data-theme='dark'] .location-card-premium h3,
:root[data-theme='dark'] .project-type-card h3,
:root[data-theme='dark'] .trust-card h3,
:root[data-theme='dark'] .process-scroll-step h3 {
  color: var(--theme-text) !important;
}

:root[data-theme='dark'] p,
:root[data-theme='dark'] .lead,
:root[data-theme='dark'] .muted,
:root[data-theme='dark'] .panel p,
:root[data-theme='dark'] .service-pill-panel p,
:root[data-theme='dark'] .mini-value p,
:root[data-theme='dark'] .project-card p,
:root[data-theme='dark'] .contact-editorial p,
:root[data-theme='dark'] .contact-form-panel > p,
:root[data-theme='dark'] .info-card-content,
:root[data-theme='dark'] .detail-value-premium,
:root[data-theme='dark'] .trust-card p,
:root[data-theme='dark'] .process-scroll-step p {
  color: var(--theme-muted) !important;
}

:root[data-theme='dark'] input,
:root[data-theme='dark'] select,
:root[data-theme='dark'] textarea {
  background: var(--theme-input) !important;
  color: var(--theme-input-text) !important;
  border-color: var(--theme-border) !important;
}

:root[data-theme='dark'] input::placeholder,
:root[data-theme='dark'] textarea::placeholder {
  color: rgba(169, 184, 200, 0.62) !important;
}

:root[data-theme='dark'] .form-file-upload {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(232, 240, 248, 0.2) !important;
}

:root[data-theme='dark'] .process-schematic {
  background:
    linear-gradient(135deg, rgba(7, 16, 24, 0.96), rgba(11, 47, 92, 0.94)),
    #071018 !important;
  border-color: rgba(232, 240, 248, 0.16) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34) !important;
}

:root[data-theme='dark'] .process-schematic::before {
  border-color: rgba(232, 240, 248, 0.12) !important;
}

:root[data-theme='dark'] .process-schematic::after {
  opacity: 0.18 !important;
  background-image:
    linear-gradient(rgba(232, 240, 248, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 240, 248, 0.16) 1px, transparent 1px) !important;
}

:root[data-theme='dark'] .process-chip {
  color: rgba(232, 240, 248, 0.82) !important;
  background: rgba(7, 16, 24, 0.78) !important;
  border-color: rgba(232, 240, 248, 0.18) !important;
}

:root[data-theme='dark'] .process-chip.active {
  color: #ffffff !important;
  background: rgba(24, 91, 159, 0.72) !important;
  border-color: rgba(255, 0, 0, 0.64) !important;
}

:root[data-theme='dark'] .process-scroll-step {
  background: var(--theme-panel-glass) !important;
  border-color: var(--theme-border) !important;
}

:root[data-theme='dark'] .final-cta-section,
:root[data-theme='dark'] .contact-page-hero,
:root[data-theme='dark'] .services-hero,
:root[data-theme='dark'] .band,
:root[data-theme='dark'] .cta-band {
  background: var(--gradient-steel) !important;
  color: #ffffff !important;
}

:root[data-theme='dark'] body.internal-page {
  background:
    radial-gradient(circle at top, rgba(24, 91, 159, 0.18), transparent 28%),
    linear-gradient(180deg, #050b12 0%, #071523 42%, #050b12 100%) !important;
}

:root[data-theme='dark'] .admin-shell,
:root[data-theme='dark'] .admin-section {
  color: var(--theme-text) !important;
}

:root[data-theme='dark'] .admin-panel,
:root[data-theme='dark'] .admin-category-nav,
:root[data-theme='dark'] .selection-row,
:root[data-theme='dark'] .toolbar-controls,
:root[data-theme='dark'] .admin-list,
:root[data-theme='dark'] .content-list,
:root[data-theme='dark'] .inquiry-card,
:root[data-theme='dark'] .job-list-item,
:root[data-theme='dark'] .content-item {
  background: var(--theme-panel) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

:root[data-theme='dark'] .admin-panel h2,
:root[data-theme='dark'] .admin-panel h3,
:root[data-theme='dark'] .panel-header h2,
:root[data-theme='dark'] .panel-header h3,
:root[data-theme='dark'] .admin-topbar h1 {
  color: var(--theme-text) !important;
}

:root[data-theme='dark'] .admin-panel p,
:root[data-theme='dark'] .panel-header p,
:root[data-theme='dark'] .admin-muted,
:root[data-theme='dark'] .content-meta,
:root[data-theme='dark'] .inquiry-meta,
:root[data-theme='dark'] .panel-kicker {
  color: var(--theme-muted) !important;
}

:root[data-theme='dark'] .admin-form input,
:root[data-theme='dark'] .admin-form textarea,
:root[data-theme='dark'] .admin-form select,
:root[data-theme='dark'] .login-form input,
:root[data-theme='dark'] .toolbar-controls input,
:root[data-theme='dark'] .toolbar-controls select,
:root[data-theme='dark'] .selection-row input,
:root[data-theme='dark'] .status-select {
  background: var(--theme-input) !important;
  color: var(--theme-input-text) !important;
  border-color: var(--theme-border) !important;
}

:root[data-theme='dark'] .admin-category-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-muted) !important;
}

:root[data-theme='dark'] .admin-category-btn:hover,
:root[data-theme='dark'] .admin-category-btn.is-active {
  background: rgba(24, 91, 159, 0.22) !important;
  color: var(--theme-text) !important;
  border-color: rgba(24, 91, 159, 0.46) !important;
}

:root[data-theme='dark'] table,
:root[data-theme='dark'] th,
:root[data-theme='dark'] td {
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

:root[data-theme='dark'] th {
  background: var(--theme-panel-soft) !important;
}

/* ---------- final unified header: one header system for every page ---------- */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important;
  border-bottom: 1px solid var(--theme-border) !important;
  box-shadow: 0 10px 30px rgba(7, 16, 24, 0.08) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

.site-header.is-scrolled,
body.nav-open .site-header {
  background: color-mix(in srgb, var(--paper) 97%, transparent) !important;
  border-bottom-color: var(--theme-border) !important;
  box-shadow: 0 14px 34px rgba(7, 16, 24, 0.12) !important;
}

:root[data-theme='dark'] .site-header,
:root[data-theme='dark'] .site-header.is-scrolled,
:root[data-theme='dark'] body.nav-open .site-header {
  background: rgba(5, 11, 18, 0.94) !important;
  border-bottom-color: rgba(232, 240, 248, 0.16) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34) !important;
}

.site-header .container,
.site-header-container {
  width: min(100% - 2rem, var(--max)) !important;
  min-height: 76px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.home-page .site-header .container {
  width: min(100% - 2rem, var(--max)) !important;
  max-width: var(--max) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 132px !important;
}

.brand img,
.site-header.is-scrolled .brand img {
  width: 132px !important;
  height: 52px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 3px 10px rgba(11, 102, 255, 0.12)) !important;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  margin-left: auto !important;
}

.site-nav a,
.theme-toggle,
.menu-toggle {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.68rem 0.9rem !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted)) !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-nav a::after,
.site-nav .nav-cta::after,
.btn-primary::after {
  display: none !important;
}

.site-nav a:hover,
.site-nav a.active,
.theme-toggle:hover,
.menu-toggle:hover {
  color: var(--brand-primary) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-panel-soft) !important;
}

.site-nav a.active {
  color: var(--brand-primary) !important;
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--theme-panel)) !important;
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent) !important;
}

.theme-toggle,
.site-nav .theme-toggle {
  width: 46px !important;
  min-width: 46px !important;
  color: var(--ink) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-panel) !important;
  font-size: 1.12rem !important;
  padding: 0 !important;
}

.site-nav .nav-cta,
.nav-cta {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--brand-primary-deep), var(--brand-primary)) !important;
  box-shadow: 0 8px 20px rgba(11, 102, 255, 0.22) !important;
}

.site-nav .nav-cta:hover,
.nav-cta:hover {
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

:root[data-theme='dark'] .site-nav a,
:root[data-theme='dark'] .theme-toggle,
:root[data-theme='dark'] .menu-toggle {
  color: rgba(246, 249, 252, 0.84) !important;
}

:root[data-theme='dark'] .site-nav a:hover,
:root[data-theme='dark'] .site-nav a.active,
:root[data-theme='dark'] .theme-toggle:hover,
:root[data-theme='dark'] .menu-toggle:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(232, 240, 248, 0.16) !important;
}

:root[data-theme='dark'] .theme-toggle,
:root[data-theme='dark'] .site-nav .theme-toggle {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(232, 240, 248, 0.18) !important;
}

.theme-toggle.mobile-theme-toggle {
  display: none !important;
}

.menu-toggle {
  display: none !important;
  font-size: 0 !important;
}

.menu-toggle-icon {
  width: 18px;
  height: 14px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-toggle-icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

@media (max-width: 980px) {
  .site-header .container,
  .site-header-container {
    min-height: 68px !important;
  }

  .brand {
    min-width: 112px !important;
  }

  .brand img,
  .site-header.is-scrolled .brand img {
    width: 112px !important;
    height: 44px !important;
  }

  .menu-toggle {
    display: inline-flex !important;
    margin-left: 0 !important;
  }

  .theme-toggle.mobile-theme-toggle {
    display: inline-flex !important;
    margin-left: auto !important;
  }

  .site-nav {
    display: none !important;
    position: fixed !important;
    top: 76px !important;
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    max-height: calc(100vh - 96px) !important;
    overflow: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    padding: 0.8rem !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-panel) !important;
    box-shadow: 0 22px 56px rgba(7, 16, 24, 0.18) !important;
  }

  .site-nav.open {
    display: flex !important;
  }

  .site-nav a,
  .site-nav .nav-cta {
    width: 100% !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  .site-nav .theme-toggle {
    display: none !important;
  }

  :root[data-theme='dark'] .site-nav {
    background: var(--theme-panel) !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38) !important;
  }
}

@media (max-width: 560px) {
  html,
  body {
    max-width: 100dvw !important;
    overflow-x: hidden !important;
  }

  .site-header {
    width: 100dvw !important;
    overflow: hidden !important;
  }

  .site-header .container,
  .site-header-container {
    width: min(calc(100dvw - 1rem), var(--max)) !important;
    min-width: 0 !important;
  }

  .brand {
    width: 90px !important;
    min-width: 90px !important;
  }

  .brand img,
  .site-header.is-scrolled .brand img {
    width: 90px !important;
    height: 38px !important;
  }

  .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }
}

/* ---------- Header theme micro-animation ---------- */
:root {
  --theme-progress: 0;
}

:root.is-theme-animating body,
:root.is-theme-animating .section,
:root.is-theme-animating .compact-section,
:root.is-theme-animating .contact-services-section,
:root.is-theme-animating .contact-main-section,
:root.is-theme-animating .contact-info-section,
:root.is-theme-animating .locations-premium-section,
:root.is-theme-animating .project-types-section,
:root.is-theme-animating .trust-section,
:root.is-theme-animating .careers-main,
:root.is-theme-animating .careers-section,
:root.is-theme-animating body.internal-page {
  background: var(--paper) !important;
  color: var(--theme-text) !important;
  transition: background 90ms linear, color 90ms linear !important;
}

:root.is-theme-animating .site-header,
:root.is-theme-animating .site-header.is-scrolled,
:root.is-theme-animating body.nav-open .site-header {
  background: color-mix(in srgb, var(--paper) 95%, transparent) !important;
  border-bottom-color: var(--theme-border) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 14%, transparent) !important;
}

:root.is-theme-animating .panel,
:root.is-theme-animating .metric,
:root.is-theme-animating .contact-card,
:root.is-theme-animating .service-pill-panel,
:root.is-theme-animating .mini-value,
:root.is-theme-animating .project-card,
:root.is-theme-animating .featured-project,
:root.is-theme-animating .info-card,
:root.is-theme-animating .location-card-premium,
:root.is-theme-animating .project-type-card,
:root.is-theme-animating .trust-card,
:root.is-theme-animating .service-card,
:root.is-theme-animating .contact-form-panel,
:root.is-theme-animating .job-card,
:root.is-theme-animating .benefit-card,
:root.is-theme-animating .culture-card,
:root.is-theme-animating .team-card,
:root.is-theme-animating .node-content {
  background: var(--theme-panel) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

:root.is-theme-animating h1,
:root.is-theme-animating h2,
:root.is-theme-animating h3,
:root.is-theme-animating h4,
:root.is-theme-animating label,
:root.is-theme-animating p,
:root.is-theme-animating .lead,
:root.is-theme-animating .muted {
  transition: color 90ms linear !important;
}

.theme-micro {
  position: relative;
  width: 64px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  margin: 0 -0.1rem 0 -0.25rem;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
  perspective: 120px;
  transform-style: preserve-3d;
}

.theme-micro.mobile-theme-micro {
  display: none;
}

.theme-rigger {
  width: 72px;
  height: 56px;
  display: block;
  overflow: visible;
  background: transparent;
}

.theme-rigger * {
  vector-effect: non-scaling-stroke;
}

.theme-thread {
  transform-box: fill-box;
  transform-origin: 20px 0;
}

.theme-thread-line,
.theme-thread-glint {
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.theme-thread-line {
  stroke: color-mix(in srgb, var(--brand-primary) 72%, var(--theme-text));
  stroke-width: 1.25;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand-primary) 35%, transparent));
}

.theme-thread-glint {
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 0.45;
}

.theme-thread-knot {
  fill: color-mix(in srgb, var(--paper) 72%, transparent);
  stroke: color-mix(in srgb, var(--brand-signal) 72%, #ffffff);
  stroke-width: 1;
  filter: drop-shadow(0 2px 3px rgba(217, 43, 43, 0.22));
}

.theme-person {
  transform-box: fill-box;
  transform-origin: 49px 51px;
  transform: translate3d(0, 0, 0) rotate(-5deg) skewX(-2deg);
}

.theme-person-shadow {
  fill: color-mix(in srgb, var(--ink) 18%, transparent);
  opacity: 0.4;
}

.theme-face,
.theme-neck,
.theme-hand {
  fill: #d89061;
  fill: url("#themeSkin") #d89061;
}

.theme-hair {
  fill: #101827;
}

.theme-brow,
.theme-mouth {
  fill: none;
  stroke: rgba(35, 24, 20, 0.72);
  stroke-width: 0.65;
  stroke-linecap: round;
}

.theme-neck {
  opacity: 0.92;
}

.theme-torso path:first-child {
  fill: #0b66ff;
  fill: url("#themeJacket") #0b66ff;
}

.theme-shirt {
  fill: rgba(255, 255, 255, 0.88);
}

.theme-jacket-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 0.75;
  stroke-linecap: round;
}

.theme-arm path {
  fill: none;
  stroke: #d89061;
  stroke: url("#themeSkin") #d89061;
  stroke-width: 5;
  stroke-linecap: round;
}

.theme-leg path:first-child {
  fill: none;
  stroke: #101827;
  stroke: url("#themePants") #101827;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.theme-shoe {
  fill: #101827;
}

.theme-head {
  transform-box: fill-box;
  transform-origin: 48px 18px;
  transform: rotate(3deg);
}

.theme-arm,
.theme-leg {
  transform-box: fill-box;
  transform-origin: center top;
}

.theme-arm-left {
  transform-origin: 55px 24px;
}

.theme-arm-right {
  transform-origin: 38px 24px;
  transform: rotate(8deg);
}

.theme-micro * {
  animation: none !important;
  transition: none !important;
}

.theme-leg-back {
  transform: rotate(5deg);
  transform-origin: 42px 35px;
}

.theme-leg-front {
  transform: rotate(-3deg);
  transform-origin: 50px 35px;
}

@media (max-width: 1180px) {
  .theme-micro {
    width: 48px;
    flex-basis: 48px;
    margin-inline: -0.25rem;
    transform: scale(0.9);
  }
}

@media (max-width: 980px) {
  .site-nav .theme-micro {
    display: none !important;
  }

  .theme-micro.mobile-theme-micro {
    display: inline-flex !important;
  }

  .theme-micro {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    margin-inline: -0.2rem;
    transform: scale(0.78);
  }
}

@media (max-width: 560px) {
  .theme-micro {
    width: 34px;
    height: 40px;
    flex-basis: 34px;
    margin-left: -0.3rem;
    margin-right: -0.15rem;
    transform: scale(0.68);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-micro {
    opacity: 0.85;
  }

  .theme-micro,
  .theme-micro * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Solutions page contrast fix ---------- */
.solutions-page .editorial-card {
  background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%) !important;
  border-color: rgba(24, 91, 159, 0.18) !important;
  color: #0f1724 !important;
}

.solutions-page .editorial-card .eyebrow {
  color: #5d748c !important;
}

.solutions-page .editorial-card h3 {
  color: #0f1724 !important;
  letter-spacing: 0 !important;
}

.solutions-page .editorial-card .compact-list,
.solutions-page .editorial-card .compact-list li {
  color: #42566b !important;
}

.solutions-page .editorial-card .compact-list li::marker {
  color: var(--brand-signal) !important;
}

:root[data-theme='dark'] .solutions-page .editorial-card {
  background: linear-gradient(180deg, #ffffff 0%, #e8eef5 100%) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.24) !important;
}

/* ---------- Tech stack icons + readable card text ---------- */
.tech-stack-section .tech-card {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f1724 !important;
}

.tech-stack-section .tech-card h3 {
  color: #0f1724 !important;
  letter-spacing: 0 !important;
}

.tech-stack-section .tech-metric,
.tech-stack-section .tech-metric span {
  color: #5b6b7c !important;
}

.tech-stack-section .tech-metric strong {
  color: #0f1724 !important;
}

.tech-stack-section .tech-badge {
  color: transparent !important;
  font-size: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.tech-stack-section .tech-badge::before {
  content: "";
  width: 32px;
  height: 32px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tech-badge--html::before { background-image: url("https://cdn.simpleicons.org/html5/E34F26"); }
.tech-badge--css::before { background-image: url("https://cdn.simpleicons.org/css/1572B6"); }
.tech-badge--react::before { background-image: url("https://cdn.simpleicons.org/react/61DAFB"); }
.tech-badge--node::before { background-image: url("https://cdn.simpleicons.org/nodedotjs/339933"); }
.tech-badge--js::before { background-image: url("https://cdn.simpleicons.org/javascript/F7DF1E"); }
.tech-badge--next::before { background-image: url("https://cdn.simpleicons.org/nextdotjs/000000"); }
.tech-badge--ts::before { background-image: url("https://cdn.simpleicons.org/typescript/3178C6"); }
.tech-badge--vue::before { background-image: url("https://cdn.simpleicons.org/vuedotjs/4FC08D"); }
.tech-badge--angular::before { background-image: url("https://cdn.simpleicons.org/angular/DD0031"); }
.tech-badge--java::before { background-image: url("https://cdn.simpleicons.org/openjdk/ED8B00"); }
.tech-badge--python::before { background-image: url("https://cdn.simpleicons.org/python/3776AB"); }
.tech-badge--flutter::before { background-image: url("https://cdn.simpleicons.org/flutter/02569B"); }
.tech-badge--mongo::before { background-image: url("https://cdn.simpleicons.org/mongodb/47A248"); }
.tech-badge--ruby::before { background-image: url("https://cdn.simpleicons.org/ruby/CC342D"); }
.tech-badge--postgres::before { background-image: url("https://cdn.simpleicons.org/postgresql/4169E1"); }
.tech-badge--mysql::before { background-image: url("https://cdn.simpleicons.org/mysql/4479A1"); }
.tech-badge--aws::before { background-image: url("https://cdn.simpleicons.org/amazonwebservices/232F3E"); }
.tech-badge--docker::before { background-image: url("https://cdn.simpleicons.org/docker/2496ED"); }
.tech-badge--shopify::before { background-image: url("https://cdn.simpleicons.org/shopify/7AB55C"); }
.tech-badge--wp::before { background-image: url("https://cdn.simpleicons.org/wordpress/21759B"); }
.tech-badge--qgis::before { background-image: url("https://cdn.simpleicons.org/qgis/589632"); }
.tech-badge--arcgis::before { background-image: url("https://cdn.simpleicons.org/arcgis/2C7AC3"); }
.tech-badge--adwords::before { background-image: url("https://cdn.simpleicons.org/googleads/4285F4"); }
.tech-badge--meta::before { background-image: url("https://cdn.simpleicons.org/meta/0467DF"); }
.tech-badge--analytics::before { background-image: url("https://cdn.simpleicons.org/googleanalytics/E37400"); }
.tech-badge--mailchimp::before { background-image: url("https://cdn.simpleicons.org/mailchimp/FFE01B"); }
.tech-badge--excel::before { background-image: url("https://cdn.simpleicons.org/microsoftexcel/217346"); }
.tech-badge--sheets::before { background-image: url("https://cdn.simpleicons.org/googlesheets/34A853"); }
.tech-badge--powerbi::before { background-image: url("https://cdn.simpleicons.org/powerbi/F2C811"); }

/* Keep the most important business-tool badges visible without a CDN request. */
.tech-badge--aws::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23f8991d' d='M10 39c12 8 29 9 44 1-11 11-31 15-44 4z'/%3E%3Cpath fill='%23232f3e' d='M16 17h32v6H16zm4 9h24v6H20zm4 9h16v6H24z'/%3E%3C/svg%3E");
}

.tech-badge--excel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='18' y='8' width='38' height='48' rx='4' fill='%23217346'/%3E%3Cpath fill='%23fff' d='M8 16h26v32H8z'/%3E%3Cpath fill='%23217346' d='m14 22 6 9 6-9h5l-8.5 12L31 46h-5l-6-9-6 9H9l8.5-12L9 22z'/%3E%3Cpath fill='%23fff' d='M38 18h12v4H38zm0 9h12v4H38zm0 9h12v4H38z'/%3E%3C/svg%3E");
}

.tech-badge--powerbi::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23f2c811' d='M10 46h8V28h-8zm12 0h8V18h-8zm12 0h8V10h-8zm12 0h8V23h-8z'/%3E%3C/svg%3E");
}

.tech-badge--ocr {
  color: #334155 !important;
}

.tech-badge--ocr::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='6' d='M12 24V12h12M40 12h12v12M52 40v12H40M24 52H12V40'/%3E%3Cpath fill='%23475569' d='M25 25h14v14H25z'/%3E%3C/svg%3E");
}

:root[data-theme='dark'] .tech-stack-section .tech-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ---------- transparent top header + single right-side theme character ---------- */
.site-header,
:root[data-theme='dark'] .site-header,
:root.is-theme-animating .site-header {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header.is-scrolled,
body.nav-open .site-header,
:root.is-theme-animating .site-header.is-scrolled,
:root.is-theme-animating body.nav-open .site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(15, 23, 36, 0.08) !important;
  box-shadow: 0 14px 34px rgba(7, 16, 24, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-theme='dark'] .site-header.is-scrolled,
:root[data-theme='dark'] body.nav-open .site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(15, 23, 36, 0.08) !important;
  box-shadow: 0 14px 34px rgba(7, 16, 24, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header .site-nav a,
.site-header .theme-toggle,
.site-header .menu-toggle,
:root[data-theme='dark'] .site-header .site-nav a,
:root[data-theme='dark'] .site-header .theme-toggle,
:root[data-theme='dark'] .site-header .menu-toggle,
:root.is-theme-animating .site-header .site-nav a,
:root.is-theme-animating .site-header .theme-toggle,
:root.is-theme-animating .site-header .menu-toggle,
.site-header.is-scrolled .site-nav a,
.site-header.is-scrolled .theme-toggle,
.site-header.is-scrolled .menu-toggle,
body.nav-open .site-nav a,
body.nav-open .theme-toggle,
body.nav-open .menu-toggle,
:root[data-theme='dark'] .site-header.is-scrolled .site-nav a,
:root[data-theme='dark'] .site-header.is-scrolled .theme-toggle,
:root[data-theme='dark'] .site-header.is-scrolled .menu-toggle,
:root[data-theme='dark'] body.nav-open .site-nav a,
:root[data-theme='dark'] body.nav-open .theme-toggle,
:root[data-theme='dark'] body.nav-open .menu-toggle {
  color: #0f1724 !important;
  transition-property: background, border-color, box-shadow, transform !important;
}

.site-header .site-nav a:hover,
.site-header .site-nav a.active,
.site-header .theme-toggle:hover,
:root[data-theme='dark'] .site-header .site-nav a:hover,
:root[data-theme='dark'] .site-header .site-nav a.active,
:root[data-theme='dark'] .site-header .theme-toggle:hover,
.site-header.is-scrolled .site-nav a:hover,
.site-header.is-scrolled .site-nav a.active,
.site-header.is-scrolled .theme-toggle:hover,
body.nav-open .site-nav a:hover,
body.nav-open .site-nav a.active,
body.nav-open .theme-toggle:hover,
:root[data-theme='dark'] .site-header.is-scrolled .site-nav a:hover,
:root[data-theme='dark'] .site-header.is-scrolled .site-nav a.active,
:root[data-theme='dark'] .site-header.is-scrolled .theme-toggle:hover,
:root[data-theme='dark'] body.nav-open .site-nav a:hover,
:root[data-theme='dark'] body.nav-open .site-nav a.active,
:root[data-theme='dark'] body.nav-open .theme-toggle:hover {
  color: var(--brand-primary) !important;
  background: rgba(244, 248, 252, 0.72) !important;
  border-color: rgba(15, 23, 36, 0.12) !important;
}

.site-header .theme-toggle,
:root[data-theme='dark'] .site-header .theme-toggle,
.site-header.is-scrolled .theme-toggle,
:root[data-theme='dark'] .site-header.is-scrolled .theme-toggle,
body.nav-open .theme-toggle,
:root[data-theme='dark'] body.nav-open .theme-toggle {
  background: transparent !important;
  border-color: rgba(15, 23, 36, 0.12) !important;
}

.site-header .container,
.site-header-container {
  isolation: isolate !important;
}

.theme-micro {
  width: clamp(42px, 3.4vw, 50px) !important;
  height: 48px !important;
  flex: 0 0 clamp(42px, 3.4vw, 50px) !important;
  margin-left: 0.05rem !important;
  margin-right: -0.38rem !important;
  align-self: center !important;
  z-index: 5 !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  overflow: visible !important;
  background: transparent !important;
}

.theme-rigger {
  width: 62px !important;
  height: 54px !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: translateY(1px) scale(0.88);
  transform-origin: 50px 58px;
  pointer-events: none !important;
}

.theme-person,
.theme-thread {
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-face,
.theme-neck,
.theme-hand {
  fill: #d89061;
  fill: url("#themeSkin") #d89061;
}

.theme-eye {
  fill: url("#themeEye") #eaf7ff;
}

.theme-pupil {
  fill: #101827;
}

.theme-torso path:first-child {
  fill: #0b66ff;
  fill: url("#themeJacket") #0b66ff;
}

.theme-shirt {
  fill: #172033;
}

.theme-sleeve-stripe {
  fill: none;
  stroke: #e63746;
  stroke-width: 1.1;
  stroke-linecap: round;
}

.theme-shoulders path {
  fill: none;
  stroke: rgba(10, 18, 30, 0.22);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.theme-leg path:first-child {
  stroke: #101827;
  stroke: url("#themePants") #101827;
  stroke-width: 5.2;
  stroke-linecap: round;
  fill: none;
}

.theme-arm path {
  fill: none;
  stroke: #182235;
  stroke-width: 4.4;
  stroke-linecap: round;
  filter: url("#themeSoftShadow");
}

.theme-shoe {
  fill: #f8fbff;
  stroke: #111827;
  stroke-width: 0.7;
}

.theme-thread-line {
  stroke: #0b66ff;
  stroke-width: 1.1;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(7, 16, 24, 0.16));
}

.theme-thread-glint {
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 0.55;
  fill: none;
  stroke-linecap: round;
}

.theme-thread-knot {
  fill: #ffffff;
  stroke: #0b66ff;
  stroke-width: 0.7;
}

.theme-face,
.theme-hair,
.theme-torso,
.theme-head {
  filter: url("#themeSoftShadow");
}

.theme-hair {
  fill: #7b2f18;
}

.theme-brow,
.theme-mouth,
.theme-jacket-line {
  fill: none;
  stroke: #172033;
  stroke-width: 0.75;
  stroke-linecap: round;
}

.site-nav .nav-cta,
.nav-cta {
  position: relative !important;
  z-index: 3 !important;
}

.site-nav .theme-toggle,
.theme-toggle.mobile-theme-toggle {
  position: relative !important;
  z-index: 8 !important;
  pointer-events: auto !important;
}

.theme-bulb {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5a400;
  filter: drop-shadow(0 0 7px rgba(255, 182, 39, 0.72));
}

.theme-bulb svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.theme-bulb-glass {
  fill: rgba(255, 191, 55, 0.3);
  stroke: #ffbf37;
  stroke-width: 1.7;
}

.theme-bulb-filament {
  fill: none;
  stroke: #fff2a8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-bulb-base {
  fill: #e8edf3;
  stroke: #394557;
  stroke-width: 1.2;
}

.theme-bulb-stem,
.theme-bulb-ridge {
  fill: none;
  stroke: #f9fbff;
  stroke-width: 1.25;
  stroke-linecap: round;
}

.theme-bulb--off {
  color: #748194;
  filter: drop-shadow(0 1px 2px rgba(7, 16, 24, 0.2));
}

.theme-bulb--off .theme-bulb-glass {
  fill: rgba(115, 129, 148, 0.1);
  stroke: #748194;
}

.theme-bulb--off .theme-bulb-filament {
  stroke: #8b97a8;
}

.theme-bulb--off .theme-bulb-base {
  fill: #9aa5b4;
  stroke: #4b5563;
}

.theme-bulb--off .theme-bulb-stem,
.theme-bulb--off .theme-bulb-ridge {
  stroke: #e5e7eb;
}

.header-mobile-actions {
  display: none !important;
}

@media (max-width: 1180px) {
  .theme-micro {
    width: 42px !important;
    height: 46px !important;
    flex-basis: 42px !important;
    margin-right: -0.16rem !important;
    transform: none !important;
  }

  .theme-rigger {
    transform: translateY(1px) scale(0.78);
  }
}

@media (max-width: 980px) {
  .site-header .container,
  .site-header-container {
    width: min(calc(100dvw - 32px), var(--max)) !important;
    min-height: 66px !important;
    gap: 0.75rem !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .brand {
    min-width: 104px !important;
  }

  .brand img,
  .site-header.is-scrolled .brand img {
    width: 104px !important;
    height: 42px !important;
  }

  .header-mobile-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1003 !important;
  }

  .site-nav {
    background: #ffffff !important;
    color: #0f1724 !important;
    border-color: rgba(15, 23, 36, 0.1) !important;
    box-shadow: 0 22px 56px rgba(7, 16, 24, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header .menu-toggle {
    position: relative !important;
    z-index: 1002 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    flex: 0 0 40px !important;
  }

  .site-header .site-nav {
    display: none !important;
    z-index: 1001 !important;
  }

  .site-header .site-nav.open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .theme-micro.mobile-theme-micro {
    width: 46px !important;
    height: 50px !important;
    flex: 0 0 46px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .theme-micro.mobile-theme-micro .theme-rigger {
    width: 64px !important;
    height: 56px !important;
    transform: translateY(1px) scale(0.78);
    transform-origin: 50px 58px;
  }

  .theme-toggle.mobile-theme-toggle {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 40px !important;
  }

  .site-nav .nav-cta {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .site-header {
    overflow: visible !important;
  }

  .site-header .container,
  .site-header-container {
    width: calc(100dvw - 28px) !important;
    min-height: 62px !important;
    gap: 0.5rem !important;
  }

  .brand {
    width: 92px !important;
    min-width: 92px !important;
  }

  .brand img,
  .site-header.is-scrolled .brand img {
    width: 92px !important;
    height: 38px !important;
  }

  .theme-micro.mobile-theme-micro {
    width: clamp(40px, 12vw, 46px) !important;
    height: 48px !important;
    flex-basis: clamp(40px, 12vw, 46px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .theme-micro.mobile-theme-micro .theme-rigger {
    transform: translateY(1px) scale(0.72);
  }

  .header-mobile-actions {
    gap: clamp(0.34rem, 2.2vw, 0.5rem) !important;
  }

  .theme-toggle.mobile-theme-toggle,
  .site-header .menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }
}