/* ==========================================================================
   GeeksPod: design system and site styles
   One stylesheet for every page. Mobile-first. No frameworks.

   Contents
   1.  Fonts
   2.  Tokens
   3.  Base and reset
   4.  Layout primitives
   5.  Typography components
   6.  Buttons and links
   7.  Header and navigation
   8.  Footer
   9.  Shared decorative layers (stars, glow, divider)
   10. Home: hero and pod chart
   11. Home: experience band
   12. Home: services
   13. Home: expertise matrix
   14. Home: advantage
   15. Home: process timeline
   16. Home: manifesto (no boundaries)
   17. CTA panel (shared)
   18. Inner page hero (About, Contact, 404)
   19. About page
   20. Contact page and form
   21. Motion: load sequence, reveals, reduced motion
   22. Utilities
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------
   Self-hosted variable fonts (SIL OFL 1.1, see /assets/fonts).
   Fallback faces are metric-adjusted to limit layout shift on swap. */
@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 113.26%;
  ascent-override: 85.64%;
  descent-override: 25.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.16%;
  ascent-override: 90.4%;
  descent-override: 22.51%;
  line-gap-override: 0%;
}

/* 2. Tokens -------------------------------------------------------------- */
:root {
  /* Brand */
  --c-primary: #331DFC;
  --c-primary-hover: #5646FF;
  --c-primary-deep: #111143;
  --c-violet: #684CFF;
  --c-soft: #8F83FF;
  --c-lavender: #C9C3FF;

  /* Surfaces */
  --c-bg: #070711;
  --c-bg-2: #101025;
  --c-surface: #17172F;
  --c-field: #0B0B1C;

  /* Text */
  --c-text: #FFFFFF;
  --c-text-2: #A8ABC3;
  --c-text-3: #8285A6;

  /* Lines and states */
  --c-border: #292944;
  --c-border-2: #3A3A5C;
  --c-field-border: #63638C;
  --c-focus: #B4ABFF;
  --c-error: #FF8FA0;
  --c-error-line: #FF6B81;
  --c-success: #7CE0B4;

  /* Type */
  --f-display: "Sora", "Sora Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --fs-h3: clamp(1.375rem, 1.22rem + 0.6vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --fs-display: clamp(2.125rem, 1.3rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.875rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
  --container: 78rem;
  --section-y: clamp(5rem, 3.2rem + 7.5vw, 9.5rem);
  --header-h: 4rem;

  /* Shape */
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 800ms;
}

@media (min-width: 56.25em) {
  :root { --header-h: 4.5rem; }
}

/* 3. Base and reset ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  background: var(--c-bg);
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

html.nav-open body { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
svg { overflow: visible; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--c-primary); color: #fff; }

[hidden] { display: none !important; }

/* 4. Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--flush-top { padding-top: 0; }

.section-head { max-width: 46rem; }
.section-head > * + * { margin-top: var(--s-5); }

.split {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

/* 5. Typography components ----------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-soft);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-shadow: 0 0 0 3px rgba(143, 131, 255, 0.12), 0 0 14px rgba(143, 131, 255, 0.6);
}

.h-display {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.h-section {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.h-statement {
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.h-sub {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--c-text-2);
  max-width: 38rem;
}

.prose > * + * { margin-top: 1.25em; }
.prose p { color: var(--c-text-2); max-width: 38rem; }
.prose p:first-child { color: var(--c-text); font-size: var(--fs-lg); line-height: 1.55; }

.fineprint {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--c-text-3);
}

/* 6. Buttons and links --------------------------------------------------- */
.btn {
  --btn-h: 3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: var(--btn-h);
  padding: 0 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease,
    box-shadow var(--t-base) ease,
    transform var(--t-fast) ease;
}

.btn:focus-visible { outline-offset: 4px; border-radius: var(--r-pill); }
.btn:active { transform: translateY(1px) scale(0.985); }

.btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .btn__icon--right,
.btn:focus-visible .btn__icon--right { transform: translateX(3px); }
.btn:hover .btn__icon--down,
.btn:focus-visible .btn__icon--down { transform: translateY(3px); }

.btn--primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 30px -12px rgba(51, 29, 252, 0.9);
}

.btn--primary:hover {
  background: var(--c-primary-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 4px rgba(51, 29, 252, 0.18),
    0 14px 40px -10px rgba(86, 70, 255, 0.95);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--c-border-2);
  color: var(--c-text);
}

.btn--ghost:hover {
  border-color: var(--c-soft);
  background: rgba(143, 131, 255, 0.08);
}

.btn--sm { --btn-h: 2.5rem; padding: 0 1.125rem; font-size: 0.875rem; }
.btn--lg { --btn-h: 3.5rem; padding: 0 1.75rem; font-size: 1rem; }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
  transform: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-2);
  padding-bottom: 0.2rem;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}

.link-arrow svg { width: 1rem; height: 1rem; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover { border-color: var(--c-soft); }
.link-arrow:hover svg,
.link-arrow:focus-visible svg { transform: translateX(3px); }

/* 7. Header and navigation ----------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-fast) ease;
}

.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
}

/* The frosted bar lives on a pseudo-element. A backdrop-filter on the header
   itself would trap the fixed mobile menu inside the header's box. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid rgba(58, 58, 92, 0.55);
  background: rgba(7, 7, 17, 0.74);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  opacity: 0;
  transition: opacity var(--t-base) ease;
}

.site-header.is-scrolled::before,
.site-header.is-open::before { opacity: 1; }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: auto;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-text);
  text-decoration: none;
}

.brand__logo { display: block; flex: none; width: auto; height: 1.75rem; }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text);
}

.nav-toggle__bars { width: 1.375rem; height: 1.375rem; }
.nav-toggle__bars line { transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) ease; transform-box: fill-box; transform-origin: center; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars .bar-top { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars .bar-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars .bar-bot { transform: translateY(-5px) rotate(-45deg); }

/* Mobile menu panel (only when JS has initialised the toggle) */
.site-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  background:
    radial-gradient(60rem 30rem at 100% 0%, rgba(51, 29, 252, 0.22), transparent 60%),
    var(--c-bg);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}

.site-header.is-open .site-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s;
}

.site-nav__list {
  list-style: none;
  display: grid;
  gap: 0.25rem;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--c-text); }

.site-nav__link[aria-current="page"]::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--c-soft);
  box-shadow: 0 0 12px var(--c-soft);
}

.site-menu__cta { align-self: flex-start; }

@media (max-width: 56.24em) {
  .site-menu__cta { --btn-h: 3.25rem; padding: 0 1.5rem; font-size: 1rem; }
}

.site-menu__meta {
  margin-top: auto;
  display: grid;
  gap: 0.5rem;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.site-menu__meta a { text-decoration: none; }
.site-menu__meta a:hover { color: var(--c-text); }

/* Without JavaScript: show navigation inline so it is always reachable */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-header::before { opacity: 1; }

@media (max-width: 56.24em) {
  html:not(.js) .site-header { position: relative; height: auto; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 1rem; row-gap: 0.5rem; }
}

html:not(.js) .site-menu {
  position: static;
  visibility: visible;
  opacity: 1;
  transform: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: 0;
  background: none;
  overflow: visible;
}
html:not(.js) .site-nav__list { display: flex; gap: var(--s-4); }
html:not(.js) .site-nav__link { font-family: var(--f-body); font-size: var(--fs-sm); padding: 0.5rem 0; }
html:not(.js) .site-menu__meta { display: none; }

@media (min-width: 56.25em) {
  .nav-toggle { display: none; }

  .site-menu,
  html:not(.js) .site-menu {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--s-6);
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav__list { display: flex; gap: 0.25rem; }

  .site-nav__link {
    position: relative;
    padding: 0.5rem 0.875rem;
    font-family: var(--f-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--r-pill);
  }

  .site-nav__link:hover { background: rgba(255, 255, 255, 0.04); }

  .site-nav__link[aria-current="page"]::after {
    position: absolute;
    left: 50%;
    bottom: -0.125rem;
    width: 0.3rem;
    height: 0.3rem;
    transform: translateX(-50%);
  }

  .site-menu__meta { display: none; }
}

/* 8. Footer -------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-top: clamp(4rem, 3rem + 4vw, 6rem);
  padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-border);
  background:
    radial-gradient(50rem 18rem at 15% 0%, rgba(51, 29, 252, 0.12), transparent 70%),
    var(--c-bg);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--s-5);
}

.footer__brand { grid-column: 1 / -1; max-width: 22rem; }
.footer__brand .brand__logo { height: 2.125rem; }
.footer__tagline {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--c-text);
}

.footer__brand .btn { margin-top: var(--s-5); }

.footer__title {
  margin-bottom: var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.footer__list { list-style: none; display: grid; gap: 0.625rem; font-size: var(--fs-sm); }
.footer__list a { color: var(--c-text-2); text-decoration: none; transition: color var(--t-fast) ease; overflow-wrap: anywhere; }
.footer__list a:hover { color: var(--c-text); text-decoration: underline; }
.footer__list li { color: var(--c-text-2); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.footer__bottom a { color: var(--c-text-2); text-decoration: none; }
.footer__bottom a:hover { color: var(--c-text); }

@media (min-width: 40em) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .footer__grid { grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)); gap: var(--s-6); }
  .footer__brand { grid-column: auto; }
}

/* 9. Shared decorative layers -------------------------------------------- */
.starfield {
  position: absolute;
  inset: -4%;
  z-index: -2;
  background: url("../assets/images/stars.svg") center top / 1600px auto repeat;
  opacity: 0.7;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

.divider {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border-2) 20%, var(--c-border-2) 80%, transparent);
}

.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--c-soft);
  background: var(--c-bg);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Shared SVG strokes for diagrams */
.svg-line { fill: none; stroke: rgba(143, 131, 255, 0.4); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.svg-line--muted { stroke: rgba(168, 171, 195, 0.28); }
.svg-line--hot { stroke: var(--c-soft); stroke-opacity: 0.95; }
.svg-line--dash { stroke-dasharray: 4 6; }
.svg-node { fill: var(--c-lavender); }
.svg-node--muted { fill: #565878; }
.svg-node--hot { fill: #fff; }
.svg-ring { fill: none; stroke: rgba(143, 131, 255, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svg-label {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  fill: var(--c-text-2);
}
.svg-label--strong { fill: var(--c-text); font-weight: 600; }
.svg-signal { fill: #fff; }

/* 10. Home: hero and pod chart ------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flow-root;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 5rem));
}

.hero__glow {
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -30%;
  width: 70rem;
  height: 70rem;
  max-width: 180vw;
  max-height: 180vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(51, 29, 252, 0.42), rgba(51, 29, 252, 0.12) 45%, transparent 72%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }
.hero__content { max-width: 44rem; }

.hero__title { margin-top: var(--s-5); }
.hero__lead { margin-top: var(--s-5); max-width: 35rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
}

/* Readout: what GeeksPod does, visible in the first screen */
.readout {
  list-style: none;
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-top: 1px solid var(--c-border);
}

.readout__item { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-border); }

.readout__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.readout__label::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--c-soft);
  box-shadow: 0 0 10px var(--c-soft);
}

.readout__text { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--c-text-2); }

@media (min-width: 48em) {
  .readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readout__item { padding: var(--s-5) var(--s-5) var(--s-6) 0; border-bottom: 0; }
  .readout__item + .readout__item { padding-left: var(--s-5); border-left: 1px solid var(--c-border); }
}

/* The pod chart: an instrument for finding engineers in a star field */
.hero__visual {
  position: relative;
  z-index: 0;
  width: min(120vw, 38rem);
  aspect-ratio: 1;
  margin-top: var(--s-6);
  margin-bottom: calc(min(120vw, 38rem) * -0.16);
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 84%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 84%);
}

.pod-chart { position: absolute; inset: 0; }

.pod-chart__glow {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(104, 76, 255, 0.55), rgba(51, 29, 252, 0.18) 55%, transparent 100%);
}

.pod-chart__layer { position: absolute; inset: 0; width: 100%; height: 100%; }

.dial-line { fill: none; stroke: rgba(168, 171, 195, 0.22); stroke-width: 1; }
.dial-line--faint { stroke: rgba(168, 171, 195, 0.1); }
.dial-ticks { fill: none; stroke: rgba(168, 171, 195, 0.3); stroke-width: 8; stroke-dasharray: 1.2 18.906; }
.dial-ticks--major { stroke: rgba(201, 195, 255, 0.55); stroke-width: 16; stroke-dasharray: 1.6 98.931; }

.orbit-path { fill: none; stroke: rgba(143, 131, 255, 0.28); stroke-width: 1; stroke-dasharray: 2 8; }
.orbit-node { fill: var(--c-lavender); }
.orbit-node--dim { fill: rgba(201, 195, 255, 0.5); }

.graticule ellipse,
.graticule circle { fill: none; stroke: rgba(168, 171, 195, 0.11); stroke-width: 1; }
.chart-inner-ring { fill: none; stroke: rgba(201, 195, 255, 0.35); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 9; }

.chart-lines path { fill: none; stroke: rgba(143, 131, 255, 0.42); stroke-width: 1.2; }
.chart-lines .is-hot { stroke: var(--c-soft); stroke-opacity: 1; stroke-width: 1.6; }

.chart-node__halo { fill: none; stroke: rgba(143, 131, 255, 0.35); stroke-width: 1; }
.chart-node__dot { fill: var(--c-lavender); }
.chart-node--target .chart-node__dot { fill: #fff; }
.chart-node--target .chart-node__halo { stroke: var(--c-soft); stroke-opacity: 0.8; }

.chart-label {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  fill: var(--c-text-2);
}

.chart-node--target .chart-label { fill: #fff; font-weight: 600; }

.chart-core__ring { fill: none; stroke: rgba(201, 195, 255, 0.6); stroke-width: 2; }
.chart-core__body { fill: var(--c-primary); }
.chart-core__heart { fill: #fff; }

.reticle path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.reticle__pulse { fill: none; stroke: var(--c-soft); stroke-width: 1.5; }

@media (max-width: 63.99em) {
  .chart-label { font-size: 21px; }
}

@media (min-width: 64em) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: min(100svh, 62rem);
    padding-top: calc(var(--header-h) + clamp(1.5rem, 5vh, 4.5rem));
  }

  .hero__inner { flex: 1; display: flex; flex-direction: column; }
  .hero__main { flex: 1; display: flex; align-items: center; }
  .hero__content { max-width: 52rem; }
  .hero__title { max-width: 14.5em; }
  .hero__lead { max-width: min(35rem, 46vw); }
  .chart-label { font-size: 16px; }

  .hero__visual {
    position: absolute;
    top: 47%;
    left: auto;
    right: calc(-1 * clamp(3rem, 8vw, 10rem));
    width: clamp(36rem, 52vw, 54rem);
    margin: 0;
    translate: 0 -50%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .readout {
    margin-top: clamp(2rem, 5vh, 4rem);
    background: linear-gradient(to bottom, rgba(7, 7, 17, 0.35), rgba(7, 7, 17, 0.85));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* 11. Home: experience band ---------------------------------------------- */
.experience-band { padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }

.experience-band__copy > * + * { margin-top: var(--s-4); }
.experience-band__copy p { color: var(--c-text-2); max-width: 32rem; }

.org-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.org-grid li {
  display: grid;
  place-items: center;
  min-height: clamp(5.5rem, 4rem + 4vw, 7.5rem);
  padding: var(--s-4);
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-text-2);
  background: linear-gradient(180deg, rgba(23, 23, 47, 0.6), rgba(16, 16, 37, 0.2));
}

.org-grid li:nth-child(odd) { border-right: 1px solid var(--c-border); }
.org-grid li:nth-child(-n + 2) { border-bottom: 1px solid var(--c-border); }

.org-note { margin-top: var(--s-4); }

@media (min-width: 64em) {
  .experience-band .split { align-items: center; }
}

/* 12. Home: services ----------------------------------------------------- */
.services__grid {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

@media (min-width: 60em) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg-2) 70%);
  overflow: hidden;
  transition:
    border-color var(--t-base) ease,
    box-shadow var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 195, 255, 0.45), transparent);
}

.service-card--team {
  background:
    radial-gradient(40rem 22rem at 85% 0%, rgba(51, 29, 252, 0.32), transparent 65%),
    linear-gradient(180deg, #14123A 0%, var(--c-bg-2) 75%);
  border-color: rgba(104, 76, 255, 0.35);
}

.service-card:hover {
  border-color: rgba(143, 131, 255, 0.55);
  box-shadow: 0 40px 90px -50px rgba(51, 29, 252, 0.75);
  transform: translateY(-4px);
}

.service-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-6);
  padding: clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(41, 41, 68, 0.45) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(41, 41, 68, 0.45) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(7, 7, 17, 0.55);
  overflow: hidden;
}

.service-card__visual svg { width: 100%; max-width: 28rem; height: auto; }
.service-card__visual .svg-label { font-size: 12px; }

@media (max-width: 39.99em) {
  .service-card__visual .svg-label { font-size: 14px; }
}

.service-card__kicker { font-size: var(--fs-sm); font-weight: 500; color: var(--c-soft); }
.service-card__title { margin-top: var(--s-2); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -0.035em; }
.service-card__desc { margin-top: var(--s-4); color: var(--c-text-2); }

.tick-list { list-style: none; display: grid; gap: 0.625rem; margin-top: var(--s-5); }

.tick-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.55em;
  width: 0.75rem;
  height: 0.375rem;
  border-left: 1.5px solid var(--c-soft);
  border-bottom: 1.5px solid var(--c-soft);
  transform: rotate(-45deg);
}

.service-card__cta { margin-top: auto; padding-top: var(--s-6); }

/* Signal flowing into the team on hover */
.service-card .flow { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  .service-card:hover .flow { animation: dash-flow 1.2s linear infinite; }
}

@keyframes dash-flow { to { stroke-dashoffset: -20; } }

/* 13. Home: expertise matrix --------------------------------------------- */
.expertise__grid {
  list-style: none;
  display: grid;
  gap: 1px;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-border);
  overflow: hidden;
}

.expertise__cell {
  --mx: 50%;
  --my: 50%;
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--c-bg);
  transition: background-color var(--t-base) ease;
}

.expertise__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(22rem circle at var(--mx) var(--my), rgba(51, 29, 252, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base) ease;
  pointer-events: none;
}

.expertise__cell:hover { background: #0A0A1A; }
.expertise__cell:hover::before { opacity: 1; }

.expertise__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-border-2);
  border-radius: 0.75rem;
  color: var(--c-soft);
  background: rgba(23, 23, 47, 0.6);
  transition: color var(--t-base) ease, border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}

.expertise__icon svg { width: 1.5rem; height: 1.5rem; }
.expertise__icon .icon-mask { fill: #11112A; }

.expertise__cell:hover .expertise__icon {
  color: #fff;
  border-color: rgba(143, 131, 255, 0.6);
  box-shadow: 0 0 24px -6px rgba(104, 76, 255, 0.8);
}

.expertise__title { position: relative; margin-top: var(--s-5); font-size: var(--fs-h4); letter-spacing: -0.015em; }
.expertise__text { position: relative; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-2); max-width: 26rem; }

.expertise__cell--other {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  background: linear-gradient(135deg, rgba(51, 29, 252, 0.14), rgba(7, 7, 17, 1) 70%);
}

.expertise__cell--other .expertise__title { margin-top: 0; }
.expertise__cell--other .link-arrow { align-self: flex-start; }

@media (min-width: 40em) {
  .expertise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .expertise__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expertise__cell--other {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .expertise__cell--other .link-arrow { align-self: center; }
}

/* 14. Home: advantage ---------------------------------------------------- */
.advantage__head { position: relative; }

@media (min-width: 64em) {
  .advantage__head { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.advantage-list { list-style: none; }

.advantage-item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-border);
}

.advantage-item:last-child { border-bottom: 1px solid var(--c-border); }

.advantage-item__num {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 2;
  color: var(--c-soft);
  font-variant-numeric: tabular-nums;
}

.advantage-item__title { font-size: var(--fs-h3); letter-spacing: -0.025em; }
.advantage-item__text { margin-top: var(--s-3); color: var(--c-text-2); max-width: 34rem; }

.advantage-item--feature {
  position: relative;
  padding-block: var(--s-7);
}

.advantage-item--feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: clamp(6rem, 20%, 10rem);
  height: 2px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-soft));
  box-shadow: 0 0 16px rgba(104, 76, 255, 0.9);
}

.advantage-item--feature .advantage-item__title { font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.035em; }
.advantage-item--feature .advantage-item__text { font-size: var(--fs-lg); color: var(--c-text); max-width: 36rem; }

/* 15. Home: process timeline --------------------------------------------- */
.process {
  --rail: 1.25rem;
  list-style: none;
  position: relative;
  display: grid;
  gap: var(--s-6);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding-left: calc(var(--rail) + 1.5rem);
}

.process::before,
.process::after {
  content: "";
  position: absolute;
  left: calc(var(--rail) / 2);
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background: var(--c-border-2);
}

.process::after {
  width: 2px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-soft));
  box-shadow: 0 0 14px rgba(104, 76, 255, 0.8);
  transform-origin: top center;
}

.process__step { position: relative; }

.process__node {
  position: absolute;
  left: calc(-1 * (var(--rail) / 2 + 1.5rem) - 0.5rem);
  top: 0.375rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1.5px solid var(--c-soft);
  background: var(--c-bg);
  box-shadow: 0 0 0 4px var(--c-bg);
  transition: background-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
}

.process__index {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-soft);
  font-variant-numeric: tabular-nums;
}

.process__title { margin-top: var(--s-2); font-size: var(--fs-h4); letter-spacing: -0.015em; }
.process__text { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-2); max-width: 30rem; }

/* Completed state (default, and after the reveal) */
.process__step .process__node {
  background: var(--c-soft);
  box-shadow: 0 0 0 4px var(--c-bg), 0 0 18px rgba(143, 131, 255, 0.9);
}

@media (min-width: 64em) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
    padding-left: 0;
    padding-top: 3rem;
  }

  .process::before,
  .process::after {
    left: 0.5rem;
    right: 0;
    top: 0.5rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .process::after {
    height: 2px;
    margin-left: 0;
    margin-top: -0.5px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-soft));
    transform-origin: left center;
  }

  .process__node { left: 0; top: -3rem; }
  .process__step { padding-right: var(--s-4); }
}

/* 16. Home: manifesto (no boundaries) ------------------------------------ */
.manifesto {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(34rem, 26rem + 24vw, 48rem);
  padding-block: var(--section-y);
  overflow: clip;
  text-align: center;
  background:
    radial-gradient(60rem 26rem at 50% 50%, rgba(51, 29, 252, 0.28), transparent 70%),
    var(--c-bg);
  border-block: 1px solid var(--c-border);
}

.manifesto .starfield { -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); inset: 0; opacity: 0.9; }

.manifesto__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.manifesto__content { position: relative; max-width: 58rem; }
.manifesto__title { font-size: var(--fs-display); letter-spacing: -0.04em; line-height: 1.04; }
.manifesto__text { margin: var(--s-5) auto 0; max-width: 34rem; color: var(--c-text-2); font-size: var(--fs-lg); }

.sky-grid { fill: none; stroke: rgba(168, 171, 195, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sky-link { fill: none; stroke: rgba(143, 131, 255, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sky-arc { fill: none; stroke: rgba(143, 131, 255, 0.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sky-node { fill: var(--c-lavender); }
.sky-node--bright { fill: #fff; }
.sky-halo { fill: none; stroke: rgba(143, 131, 255, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* 17. CTA panel (shared) ------------------------------------------------- */
.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 2.5rem + 7vw, 8rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  border: 1px solid rgba(143, 131, 255, 0.3);
  border-radius: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
  background:
    radial-gradient(42rem 26rem at 50% -8%, rgba(104, 76, 255, 0.9), rgba(51, 29, 252, 0.55) 35%, transparent 70%),
    linear-gradient(180deg, #120C55 0%, #0B0A2A 60%, var(--c-bg-2) 100%);
  box-shadow: 0 60px 140px -70px rgba(51, 29, 252, 0.9);
}

.cta-panel__dial {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: clamp(40rem, 70vw, 64rem);
  aspect-ratio: 1;
  translate: -50% -52%;
  opacity: 0.8;
  pointer-events: none;
}

.cta-panel__dial .dial-ticks { stroke: rgba(255, 255, 255, 0.28); stroke-width: 8; stroke-dasharray: 1 12.264; }
.cta-panel__dial .dial-line { stroke: rgba(255, 255, 255, 0.16); }

.cta-panel__title { font-size: var(--fs-h2); letter-spacing: -0.04em; line-height: 1.04; max-width: 15em; margin-inline: auto; }
.cta-panel__text { margin: var(--s-5) auto 0; max-width: 36rem; color: #D4D3EE; font-size: var(--fs-lg); }

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-7);
}

.cta-panel .btn--primary {
  background: #fff;
  color: var(--c-primary);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.6);
}

.cta-panel .btn--primary:hover {
  background: #EEEBFF;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 18px 46px -14px rgba(0, 0, 0, 0.7);
}

.cta-panel__alt { font-size: var(--fs-sm); color: #D4D3EE; }
.cta-panel__alt a { color: #fff; font-weight: 600; }

/* 18. Inner page hero ---------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 6vw, 7rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.page-hero__glow {
  position: absolute;
  z-index: -1;
  top: -35%;
  left: 50%;
  width: 80rem;
  height: 44rem;
  max-width: 200vw;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(51, 29, 252, 0.35), transparent 75%);
  pointer-events: none;
}

.page-hero__content { max-width: 56rem; }
.page-hero__title { margin-top: var(--s-5); }
.page-hero__lead { margin-top: var(--s-5); }

/* 19. About page --------------------------------------------------------- */
.about-hero { padding-bottom: clamp(13rem, 8rem + 22vw, 24rem); }

.about-hero__horizon {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(14rem, 9rem + 22vw, 26rem);
  pointer-events: none;
}

.about-hero__horizon svg { width: 100%; height: 100%; }

.horizon-limb { fill: url(#limbFill); stroke: rgba(201, 195, 255, 0.65); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.horizon-grid { fill: none; stroke: rgba(168, 171, 195, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Mission */
.mission {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.mission__orbits {
  position: absolute;
  z-index: -1;
  right: -18rem;
  top: 50%;
  width: 46rem;
  aspect-ratio: 1;
  translate: 0 -50%;
  opacity: 0.9;
  pointer-events: none;
}

.mission__orbits::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(51, 29, 252, 0.4), transparent);
}

.mission__orbits svg { position: relative; width: 100%; height: 100%; }

@media (max-width: 47.99em) {
  .mission__orbits { right: -26rem; opacity: 0.45; }
}

.mission__grid { display: grid; gap: var(--s-5); }
.mission__statement { font-weight: 500; max-width: 18em; }
.mission__support { max-width: 36rem; color: var(--c-text-2); font-size: var(--fs-lg); }
.mission__support p + p { margin-top: var(--s-4); }

@media (min-width: 64em) {
  .mission__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-6) clamp(2rem, 4vw, 4rem); }
  .mission__label { align-self: start; padding-top: 1.25rem; }
  .mission__support { grid-column: 2; margin-top: var(--s-4); }
}

/* Approach pillars */
.pillars { list-style: none; margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.pillar {
  display: grid;
  gap: var(--s-3) var(--s-6);
  padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  border-top: 1px solid var(--c-border);
}

.pillar:last-child { border-bottom: 1px solid var(--c-border); }

.pillar__head { display: flex; align-items: center; gap: var(--s-4); }

.pillar__glyph {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--c-soft);
}

.pillar__title { font-size: var(--fs-h3); letter-spacing: -0.025em; }
.pillar__text { color: var(--c-text-2); max-width: 38rem; }
.pillar__text strong { color: var(--c-text); font-weight: 500; }

@media (min-width: 48em) {
  .pillar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .pillar__text { padding-top: 0.35rem; }
}

/* Audience tiles */
.audience {
  list-style: none;
  display: grid;
  gap: var(--s-4);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.audience__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(23, 23, 47, 0.7), rgba(16, 16, 37, 0.3));
  transition: border-color var(--t-base) ease;
}

.audience__item:hover { border-color: var(--c-border-2); }

.audience__title { font-size: var(--fs-h4); letter-spacing: -0.015em; }
.audience__text { font-size: var(--fs-sm); color: var(--c-text-2); }

.audience__item--cta {
  justify-content: space-between;
  border-color: rgba(104, 76, 255, 0.45);
  background:
    radial-gradient(24rem 14rem at 100% 0%, rgba(51, 29, 252, 0.35), transparent 70%),
    var(--c-bg-2);
}

.audience__item--cta .link-arrow { align-self: flex-start; margin-top: var(--s-4); }

@media (min-width: 40em) {
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .audience { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}

/* 20. Contact page and form ---------------------------------------------- */
.contact-hero { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.contact-hero .page-hero__title { max-width: 13em; }

.contact-layout {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 64em) {
  .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.form-panel {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(40rem 20rem at 0% 0%, rgba(51, 29, 252, 0.14), transparent 60%),
    var(--c-bg-2);
}

.form-panel__intro { margin-top: var(--s-3); color: var(--c-text-2); max-width: 34rem; }
.form-panel__required { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--c-text-3); }

.form-grid {
  display: grid;
  gap: var(--s-5) var(--s-4);
  margin-top: var(--s-6);
}

@media (min-width: 40em) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.5rem; align-content: start; }

.field__label,
.field__legend {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

.field__optional { font-weight: 400; color: var(--c-text-3); }
.field__req { color: var(--c-soft); margin-left: 0.125rem; }
.field__hint { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: -0.25rem; }

.field__control {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-sm);
  background: var(--c-field);
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
}

.field__control:hover { border-color: #7A7AA6; }

.field__control:focus { outline: none; }

.field__control:focus-visible,
.field__control:focus {
  border-color: var(--c-soft);
  box-shadow: 0 0 0 4px rgba(51, 29, 252, 0.4);
  background: #0E0E24;
}

.field__control[aria-invalid="true"] { border-color: var(--c-error-line); }
.field__control[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(255, 107, 129, 0.25); }

textarea.field__control { min-height: 9.5rem; resize: vertical; }

.field__select { position: relative; }
.field__select .field__control { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.field__select svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  translate: 0 -50%;
  color: var(--c-text-2);
  pointer-events: none;
}

.field__control option { background: var(--c-bg-2); color: var(--c-text); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-error);
}

.field__error::before { content: "!"; display: grid; place-items: center; flex: none; width: 1rem; height: 1rem; margin-top: 0.05rem; border-radius: 50%; background: var(--c-error-line); color: var(--c-bg); font-size: 0.6875rem; font-weight: 700; }

fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.field .field__legend { padding: 0; margin-bottom: 0.5rem; }

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

.chip { position: relative; display: inline-flex; }

.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-pill);
  background: var(--c-field);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
  pointer-events: none;
}

.chip span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background-color var(--t-fast) ease;
}

.chip:hover span { border-color: #8A8AB8; color: var(--c-text); }
.chip input:checked + span { background: rgba(51, 29, 252, 0.35); border-color: var(--c-soft); color: #fff; }
.chip input:checked + span::before { background: #fff; border-color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 3px; }

.u-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { display: grid; gap: var(--s-4); margin-top: var(--s-6); }

.form-privacy { font-size: var(--fs-xs); color: var(--c-text-3); max-width: 34rem; }

.form-status { font-size: var(--fs-sm); color: var(--c-text-2); min-height: 1.5em; }

.form-alert {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid rgba(255, 107, 129, 0.45);
  border-radius: var(--r-md);
  background: rgba(255, 107, 129, 0.08);
}

.form-alert--info { border-color: rgba(143, 131, 255, 0.5); background: rgba(51, 29, 252, 0.12); }
.form-alert__title { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.015em; }
.form-alert p { font-size: var(--fs-sm); color: var(--c-text-2); }
.form-alert a:not(.btn) { color: var(--c-text); font-weight: 600; }
.form-alert .btn { justify-self: start; }

.form-success {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding-block: var(--s-6);
}

.form-success__mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid rgba(124, 224, 180, 0.5);
  background: rgba(124, 224, 180, 0.1);
  color: var(--c-success);
  box-shadow: 0 0 30px -6px rgba(124, 224, 180, 0.5);
}

.form-success__mark svg { width: 1.5rem; height: 1.5rem; }
.form-success h2:focus { outline: none; }
.form-success p { color: var(--c-text-2); max-width: 32rem; }

.noscript-note {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.noscript-note a { color: var(--c-text); font-weight: 600; }

@media (min-width: 40em) {
  .form-actions { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .form-actions .form-status,
  .form-actions .form-alert { grid-column: 1 / -1; }
}

/* Contact aside */
.contact-aside { display: grid; gap: var(--s-4); }

.reach-map {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(30rem 14rem at 50% 100%, rgba(51, 29, 252, 0.4), transparent 70%),
    var(--c-bg);
}

.reach-map .starfield { inset: 0; opacity: 0.55; z-index: 0; -webkit-mask-image: none; mask-image: none; }
.reach-map svg { position: relative; width: 100%; height: auto; }
.reach-map .svg-label { font-size: 15px; }

.contact-cards {
  list-style: none;
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-card {
  display: grid;
  gap: 0.375rem;
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) ease, background-color var(--t-base) ease;
}

.contact-card:hover { border-color: rgba(143, 131, 255, 0.55); background: rgba(23, 23, 47, 0.4); }

.contact-card__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.contact-card__label svg { width: 1rem; height: 1rem; color: var(--c-soft); }

.contact-card__value {
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

a.contact-card__value { text-decoration: none; }
a.contact-card__value:hover { text-decoration: underline; text-decoration-color: var(--c-soft); }

address.contact-card__value { font-size: 1.0625rem; font-weight: 500; line-height: 1.55; color: var(--c-text); }

.reach-limb { stroke: rgba(201, 195, 255, 0.65); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

.contact-social { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.reassurance { text-align: center; }
.reassurance__title { font-size: var(--fs-h2); letter-spacing: -0.04em; line-height: 1.05; }
.reassurance__text { margin: var(--s-5) auto 0; max-width: 34rem; color: var(--c-text-2); font-size: var(--fs-lg); }

/* 404 */
.notfound { min-height: 80vh; display: grid; align-items: center; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }

/* 21. Motion ------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: none; }
}

@keyframes lock-on {
  0% { opacity: 0; transform: translate(94px, -148px) scale(2.6) rotate(-45deg); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

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

@keyframes breathe {
  from { opacity: 0.75; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-2.5%, -1.5%, 0); }
}

@keyframes label-on {
  from { fill: var(--c-text-2); }
  to { fill: #fff; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Page-load sequence (CSS only, runs without JavaScript) */
  [data-load] { animation: rise 1s var(--ease-out) both; }
  [data-load="1"] { animation-delay: 0.05s; }
  [data-load="2"] { animation-delay: 0.15s; }
  [data-load="3"] { animation-delay: 0.3s; }
  [data-load="4"] { animation-delay: 0.45s; }
  [data-load="5"] { animation-delay: 0.6s; }
  [data-load="6"] { animation-delay: 0.75s; }

  /* Pod chart: lines draw, nodes appear, the reticle locks on */
  .hero__visual { animation: fade-in 1.4s var(--ease-out) 0.1s both; }
  .chart-lines path { stroke-dasharray: 1; animation: draw 1.6s var(--ease-out) both; animation-delay: 0.7s; }
  .chart-lines path:nth-child(3n + 2) { animation-delay: 0.9s; }
  .chart-lines path:nth-child(3n) { animation-delay: 1.1s; }
  .chart-lines path.is-hot { animation-delay: 1.5s; }

  .chart-node,
  .chart-core { transform-box: fill-box; transform-origin: center; animation: pop 0.8s var(--ease-out) both; animation-delay: 0.9s; }
  .chart-core { animation-delay: 0.4s; }
  .chart-node:nth-child(2n) { animation-delay: 1.05s; }
  .chart-node:nth-child(3n) { animation-delay: 1.2s; }

  .reticle { transform-box: view-box; transform-origin: 306px 548px; animation: lock-on 1.4s var(--ease-out) 1.6s both; }
  .reticle__pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.2s ease-out 3s infinite; }
  .chart-node--target .chart-label { animation: label-on 0.6s ease 2.6s both; }

  .pod-chart__dial { animation: spin 240s linear infinite; }
  .pod-chart__orbit { animation: spin 90s linear infinite reverse; }
  .pod-chart__glow,
  .hero__glow { animation: breathe 9s var(--ease-in-out) infinite alternate; }
  .hero .starfield { animation: drift 120s linear infinite alternate; }

  [data-pause-offscreen].is-paused *,
  [data-pause-offscreen].is-paused { animation-play-state: paused; }

  /* Scroll reveals: only once JavaScript confirms it can reveal them */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  }

  .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

  .reveal-ready [data-reveal-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), background-color var(--t-base) ease, border-color var(--t-base) ease;
  }

  .reveal-ready [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(2) { transition-delay: 70ms, 70ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(3) { transition-delay: 140ms, 140ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(4) { transition-delay: 210ms, 210ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(5) { transition-delay: 280ms, 280ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(6) { transition-delay: 350ms, 350ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(7) { transition-delay: 420ms, 420ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(8) { transition-delay: 490ms, 490ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(9) { transition-delay: 560ms, 560ms, 0s, 0s; }
  .reveal-ready [data-reveal-stagger].is-visible > :nth-child(10) { transition-delay: 630ms, 630ms, 0s, 0s; }

  /* Timeline: the rail fills, then each step lights up in order */
  .reveal-ready .process::after { transform: scaleY(0); transition: transform 1.6s var(--ease-in-out) 0.2s; }
  .reveal-ready .process.is-visible::after { transform: none; }
  .reveal-ready .process .process__node { background: var(--c-bg); box-shadow: 0 0 0 4px var(--c-bg); }
  .reveal-ready .process.is-visible .process__node { background: var(--c-soft); box-shadow: 0 0 0 4px var(--c-bg), 0 0 18px rgba(143, 131, 255, 0.9); }
  .reveal-ready .process.is-visible .process__step:nth-child(1) .process__node { transition-delay: 0.3s; }
  .reveal-ready .process.is-visible .process__step:nth-child(2) .process__node { transition-delay: 0.75s; }
  .reveal-ready .process.is-visible .process__step:nth-child(3) .process__node { transition-delay: 1.2s; }
  .reveal-ready .process.is-visible .process__step:nth-child(4) .process__node { transition-delay: 1.65s; }

  @media (min-width: 64em) {
    .reveal-ready .process::after { transform: scaleX(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .svg-signal,
  .reticle__pulse { display: none; }
}

/* Lighter motion on small screens */
@media (max-width: 47.99em) {
  .hero .starfield,
  .pod-chart__orbit { animation: none; }
  .svg-signal--secondary { display: none; }
}

/* 22. Utilities ---------------------------------------------------------- */
.u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-br-lg { display: none; }

@media (min-width: 64em) {
  .u-br-lg { display: inline; }
}